1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 {{name}} 13 {{hobby}} 14 {{xuge_obj}} 15 16 <button @click="my_click">点击改变数据</button> 17 </div> 18 <script> 19 const app = new Vue({ 20 el: "#app", 21 data: { 22 name: "旭哥", 23 hobby: ["唱歌", "跳舞", "请客吃饭"], 24 xuge_obj: { 25 obj1: "王铁锤", 26 obj2: "李刚蛋" 27 } 28 }, 29 methods: { 30 my_click: function () { 31 // this.name = "病变" 32 // this.hobby.push("烫头") 33 // this.hobby[0] = "狼嚎" 34 // console.log(this.hobby) 35 // 用下面这种方法改变数据里的值 36 // app.$set(this.hobby, 0, "狼嚎") 37 this.xuge_obj.obj1 = "小粉嫩" 38 } 39 }, 40 watch: { 41 name: { 42 handler: function (val, oldVal) { 43 console.log(val) 44 console.log(oldVal) 45 } 46 }, 47 // push改变数据的长度的时候 可以监听到数据改变 新旧值是是一样的 48 // 不能监听到数据里值的改变 深度监听也不可以 除非用$set 49 hobby: { 50 handler: function (val, oldVal) { 51 console.log(val) 52 console.log(oldVal) 53 }, 54 // deep: true 55 }, 56 xuge_obj: { 57 handler: function (val, oldVal) { 58 console.log(val) 59 console.log(oldVal) 60 }, 61 deep: true 62 } 63 } 64 }) 65 </script> 66 </body> 67 </html>
原文地址:https://www.cnblogs.com/wdbgqq/p/9846760.html
时间: 2024-11-05 23:19:55