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/vue@2.5.17/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>