<template> <div> <h1>监听器</h1> <ul> <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li> </ul> <hr> <ul> <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---{{item.age}}</li> </ul> </div> </template> <script> export default { data() { return { arrayObj:[ {name:'张三',age:'23'}, {name:'李四',age:'22'} ], } }, watch:{ // 需要注意的是这里所监听的对象应该是数组 arrayObj:{ handler(newVal,oldVal){ console.log(newVal+'--'+oldVal) }, deep:true, immediate:true, } }, methods:{ change(i) { // console.log(this.changeValue) this.arrayObj[i].age = this.arrayObj[i].age } } } </script>
4、对象具体属性的watch［活用computed］
<template> <div> <h1>监听器</h1> <p>{{obj.name}}</p> <input type="text" v-model="obj.name"> <p>{{newName}}</p> </div> </template> <script> export default { data() { return { obj:{name:'muzi',age:'23'}, } }, computed:{ newName(){ return this.obj.name.toUpperCase(); } }, watch:{ newName(newVal,oldVal){ console.log(newVal+'--'+oldVal) }, // newName:{ // handler(newVal,oldVal){ // console.log(newVal+'--'+oldVal) // }, // deep:true, // immediate:true, // } }, } </script>
从效果图上可以看出，计算属性最好使用在更改数据上然后进行渲染；先进行的计算属性再进行的监听。
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章: