首页 > 代码库 > vue.js中$watch的用法示例
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的用法示例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。