【vue-watch】watch监听数据变化 监听对象等
2019-04-18 16:09
766 查看
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
下面写两个demo,参考demo来了解一下
demo1
<template> <div> <el-input v-model="demo"></el-input> {{value}} </div> </template> <script> export default { name: 'index', data() { return { demo: '', value: '' }; }, watch: { demo(val) { this.value = this.demo; } } }; </script>
复制代码
上面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
demo2
<template> <div> <el-input v-model="demo.name"></el-input> {{value}} </div> </template> <script> export default { name: 'index', data() { return { demo: { name: '' }, value: '' }; }, computed: { newName() { return this.demo.name; } }, watch: { newName(val) { this.value = val; } } }; </script>
上面这个例子,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
demo3
<div id="app"> <input type="text" v-model="childrens.name" /> <input type="text" v-model="lastName" /> </div> <script type="text/javascript"> var vm = new Vue( { el: '#app', data: { childrens: { name: '小强', age: 20, sex: '男' }, tdArray:["1","2"], lastName:"张三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//对象内部的属性监听,也叫深度监听 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//键路径必须加上引号 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model绑定数据时使用的数据变化监测 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主动调用$watch方法来进行数据监测 </script> </body>
相关文章推荐
- 005 - vue之watch深度监听数据变化
- vue动态数据绑定1--如何监听一个对象的变化
- vue(2) -- vue在watch中监听对象属性的变化
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
- Vue监听数据对象变化源码
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue中的watch监听数据变化以及watch中各属性的详解
- Vue2.0 解决watch对象属性变化监听不到问题
- vue中的watch监听数据变化及watch中各属性的详解
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
- 【12】vue.js — 监听数据变化
- vue中实时监听input值的变化,停止输入n秒后去请求,而不是时时请求数据
- Vue学习笔记3.4 - 数据监听 computed, methods, watch
- Vue-- 监听路由变化,数据无法更新?
- 动态数据绑定之监听对象变化
- Vue-- 监听路由变化,数据无法更新?
- Vue v-show/v-if绑定的数据改变时,无法监听数据变化
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案