<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <input type="text" v-model="name"> <h3>{{name}}</h3> <input type="text" v-model="age"> <h3>{{age}}</h3> <h3>{{text1}}</h3> <input type="text" v-model="user.name"> <h3>{{user.name}}</h3> <h3>{{text2}}</h3> <!--与计算属性的区别 当监听到值发生变化是过程式开发 比较笨重--> <h3>{{info}}</h3> </div> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script> var vm = null; vm = new Vue({ el: "#box", data: { //data里面的属性可以写在外面 但是不具备双向绑定之类的功能 name:'moris', age:22, user:{ id:100, name : '111' }, text1:'', text2:'' }, methods:{ //有人改变就改变 }, watch:{ //监听 对应值改变就改变 不要大量使用 age:function (newValue,oldValue) { //两参 一个原来的 一个修改后的 console.log('age被修改了',newValue,oldValue); this.text1='我的年龄'+newValue+'我的名字'+this.name; }, name:function (val) { console.log(val); this.text2 = '我的名字'+val+'我的年龄'+this.age }, user:{ // bandler:(newValue,oldValue)=>{ // console.log('user被修改了',newValue,oldValue); // }, //deep:true //表示监听对象属性的变化 false bandler不执行 }, }, computed:{ info:function () { return '我的年龄'+this.age+'我的姓名'+this.name; } } }) // 外部写法 // vm.$watch('name',function (newValue,oldValue) { // console.log('age被修改了',newValue,oldValue); // }) </script> </body> </html>
vue watch 监听触发
最新推荐文章于 2024-07-10 11:21:49 发布