监听方法watch
程序员文章站
2022-03-30 21:03:40
...
这次给大家带来监听方法watch,使用监听方法watch的注意事项有哪些,下面就是实战案例,一起来看一下。
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来
当Vue视图中的数据变化时, 关联的函数会被执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <p id="root"></p> <script> var vm = new Vue({ el: "#root", data: { obj: {name: "zhaoolee", age: 12} , tel:6666666}, template: `<p><p>姓名: {{obj.name}}</p> <p>电话: {{tel}}</p> <input type="text" v-model="obj.name"> <input type="text" v-model="tel"></p>`, watch: { obj: { handler(){ console.log("obj被改变"); }, // 页面加载之初先执行一次handle immediate: true, // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能) deep: true }, "obj.name": { handler(){ console.log("=>obj.name被改变"); } }, tel:{ handler(){ console.log("tel被改变"); } } } }) </script> </body> </html>
对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写 <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-model="example1"/> /当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数 <input v-model="example2.inner0"/> </template> <script> export default { data(){ return { example0:"", example1:"", example2:{ inner0:1, innner1:2 } } }, watch:{ example0(curVal,oldVal){ console.log(curVal,oldVal); }, example1:'a',//值可以为methods的方法名 example2:{ //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象 handler(curVal,oldVal){ conosle.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } } } </script>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是监听方法watch的详细内容,更多请关注其它相关文章!
下一篇: 微信小程序参数传递详细介绍
推荐阅读
-
filezilla无法安装如何解决?filezilla安装不了的解决方法图文教程
-
怎么解决Apple Watch不能同步上传音乐?
-
filezilla如何上传网页网站,filezilla上传网页网站的方法
-
filezilla上传后文件不见了是什么原因? filezilla设置隐藏文件的方法介绍
-
filezilla二进制上传功能介绍,filezilla上传文件操作方法
-
filezilla防火墙怎么设置?filezilla防火墙设置方法教程
-
filezilla出现路径错误导致无法启动怎么办?filezilla无法启动的解决方法
-
Android ListView中headerview的动态显示和隐藏的实现方法
-
Android读取服务器图片的三种方法
-
filezilla新站点设置方法教程