vue如何使用watch监听指定数据的变化

目录
  • 使用watch监听指定数据的变化
  • vue watch监听多个值

使用watch监听指定数据的变化

在vue中，可以使用watch属性来监听data中某个属性值的变化。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <input type="text" v-model="firstname" >+
    <input type="text" v-model="lastname" >=
    <input type="text" v-model="fullname">
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      firstname:'',
      lastname:'',
      fullname:''
    },
    methods:{

    },
    //使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的function 处理函数
    watch:{
      firstname:function(newVal,oldVal){
        //console.log('监视到了firstname的变化');
        //this.fullname = this.firstname + "-" + this.lastname
        console.log(newVal +"---"+oldVal)
        this.fullname = newVal + "-" + this.lastname
      },
      'lastname':function(newVal){
        this.fullname = this.firstname + "-" + newVal
      }
    }
  })
</script>
</html>

vue watch监听多个值

用computed定义一个address对象吧，然后再去watch addres

data() {
  return {
    check: false,
    sign_img: "",
    submit_flag: false'
  }
},
computed: {
  btnObj() {
    const { sign_img, check } = this
    return {
      sign_img,
      check
    }
  }
},
watch: {
  btnObj: {
    handler: function(newVal,oldVal) {
      if(!!this.sign_img && this.check){
        this.submit_flag = true
        this.sign_flag = '1'
      }else{
        this.submit_flag = false
        this.sign_flag = '0'
      }
    },
    deep: true,
    immediate: true
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用watch监听一个对象中的属性的实现方法

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/

  • VUE watch监听器的基本使用方法详解

    目录 1.下面代码是watch的一种简单的用法 2.immediate 立即监听 3.handler方法 4. deep属性 总结 侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行. 监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值. 在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种. 1.下面代码是watch的一种简单的用法 <div id="app"> <input type="te

  • vue watch监听方法总结

    目录 1.vue中的watch作用就如其命名就是监听的作用 2.监听这个对象的属性 3.监听这个对象的属性 4.监听这个对象的属性 在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种. 1.vue中的watch作用就如其命名就是监听的作用 比如有个对象: watchData: { name: '', age: '', } 2.监听这个对象的属性 watchData: { handler: function() { console.log(); }, deep: true

  • vue如何使用watch监听指定数据的变化

    vue如何使用watch监听指定数据的变化

    目录 使用watch监听指定数据的变化 vue watch监听多个值 使用watch监听指定数据的变化 在vue中,可以使用watch属性来监听data中某个属性值的变化. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'>

  • vue组件props属性监听不到值变化问题

    目录 props属性监听不到值变化问题 props监听变化的几种方式 应用场景 1.computed 计算属性 2.methods 方法 3.watch 侦听器 props属性监听不到值变化问题 在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法. 阅读vue文档如下代码.=> var vm = new Vue({   data: {     a: 1,     b: 2,     c: 3,     d: 4,  

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • Vue中的 watch监听属性详情

    Vue中的 watch监听属性详情

    目录 一.watch监听一般数据的变化(数值,字符串,布尔值) 1.数值 2.字符串 3.布尔值 二.watch 监听 复杂类型数据的变化 1.对象 2.数组 3.对象数组 4.对象数组的属性 首先要确认 watch是一个对象,要当成对象来使用. 键:就是那个,你要监听的那个家伙: 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值(新的值),第二个是更新前的值(旧值) 值也可以是函数名:不过这个函数名要用单引号来包裹. 值是包括选项的对象:选项包括有三

  • vue中如何实时监听本地存储

    目录 如何实时监听本地存储 vue监听数据变化 watch的基本用法 获取前一次的值 handler方法和immediate属性 deep 深度侦听 如何实时监听本地存储 在main.js中 Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageE

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • vue正确使用watch监听属性变化方式

    目录 基本用法 监听object 使用deep参数 重新赋值 通过路径监听内部数据 初始化变量触发监听回调 总结 Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应.但一旦涉及到复杂数据的监听(如Object,但数组一般不需要,因为Vue针对数组做了特殊处理)时就比较复杂了,本文解释了使用watch监听属性变化的方法,包括复杂数据. 基本用法 Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑: <template>   <input type="n

  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

  • vuex提交state&&实时监听state数据的改变方法

    项目背景 websocket长连接 根据指示进行四个页面之间的跳转,在各页面执行相应的逻辑处理. 项目搭建结构如下所示: 解决方案 在四个页面外面写个父页面,router路径如下所示: vuex \src\store\mutations.js //存储到vuex里面 [WEBSOCKETDATA](state,socketdata){ state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯 state.socketData=socketdata } \s

  • vue中监听路由参数的变化及方法

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

随机推荐