<!DOCTYPE html><html lang="en"><焦作工学院head> <meta chart="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"> 姓名：<input type="text" v-model="obj.name"><br> 年龄：<四年级上册英语教案;input type="text " v-model="obj.age"><br> <button @click=rain可数吗"fn"> 点我修改 </button> </div></body><script src="./vue.js"></script><script> // watch: // 1.只要被监听的数据发生改变，就会触发对应的逻辑代码 // 2.如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的 let vm = new Vue({ el: '#app', data: { obj: { name: "xiaoming", age: 18 } }, watch: { // obj: function () { // console.log('obj改变了'); // }, // 单独监听obj中的name属性，只要其修改watch就会触发 'obj.name': function () { console.log('obj改变了'); } }, methods: { fn() { this.obj = { } // 修改了obj中的内在指向 // this.obj.name = "zhansang" //还是在obj中内存中修改不会触发watch } }, })</script></html><!DOCTYPE html><html lang="en"> <head> <meta chart="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> 姓名：<input type="text" v-model="obj.name" /><br /> 年龄：<input type="text " v-model="obj.age" /><br /> </div> </body> <script src="./vue.js"></script> <script> // watch: // 1.只要被监听的数据发生改变，就会触发对应的逻辑代码 // 2.如果被监听的数据是个对象，广东酒店管理职业技术学院对象中的属性发生改变时，监听是不会触发上的 let vm = new Vue({ el: '#app', data: { obj: { name: 'xiaoming', age: 18 } }, watch: { obj: { handler: function () { console.log('obj改变了') }, // 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码 deep: true } } }) </script></html>本文地址：https://blog.csdn.net/weixin_44757417/article/details/11018麻腐1404
本文发布于:2023-04-07 15:31:08，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/a0868ea21573362c3b3c271866a906a6.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：watch中的深度监听.doc
本文 PDF 下载地址：watch中的深度监听.pdf
| 留言与评论（共有 0 条评论） |
