vue.js中$watch的用法示例
Posted 黄鹂
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js中$watch的用法示例相关的知识,希望对你有一定的参考价值。
Vue.js 提供了一个方法 watch
,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。
在实例化时为每个键调用 $watch() ;
1 <template> 2 //观察数据为字符串或数组 3 <input v-model="example0"/> 4 <input v-model="example1"/> 5 /当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数 6 <input v-model="example2.inner0"/> 7 </template> 8 <script> 9 export default { 10 data(){ 11 return { 12 example0:"", 13 example1:"", 14 example2:{ 15 inner0:1, 16 innner1:2 17 } 18 } 19 }, 20 watch:{ 21 example0(curVal,oldVal){ 22 console.log(curVal,oldVal); 23 }, 24 example1:‘a‘,//值可以为methods的方法名 25 example2:{ 26 //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象 27 handler(curVal,oldVal){ 28 conosle.log(curVal,oldVal) 29 }, 30 deep:true 31 } 32 }, 33 methods:{ 34 a(curVal,oldVal){ 35 conosle.log(curVal,oldVal) 36 } 37 } 38 } 39 </script>
以上是关于vue.js中$watch的用法示例的主要内容,如果未能解决你的问题,请参考以下文章