Vuejs學習筆記(一)-13.修改陣列方式-響應式

阿新 • • 發佈：2021-07-01

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>04 陣列方法是響應式的</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9   <div>
10     <button @click="btn1Click">push1-1-陣列尾部加元素-響應式</button>
11     <button @click="btn2Click">push2-多-陣列尾部加元素-響應式</button>
12 
   </div>
13   <div>
14     <button @click="btn3Click">pop1-1-陣列尾部減元素-響應式</button>
15   </div>
16   <div>
17     <button @click="btn4Click">shift1-1-刪除陣列頭部元素-響應式</button>
18   </div>
19   <div>
20     <button @click="btn5Click">unshift1-多-頭部新增元素-響應式</button>
21 
   </div>
22   <div>
23     <button @click="btn6Click">splice-中間刪除元素-響應式</button>
24     <button @click="btn8Click">splice-中間插入元素-響應式</button>
25   </div>
26   <div>
27     <button @click="btn7Click">通過索引修改陣列值-非響應式</button>
28     <button @click="btn11Click">通過splice進行陣列修改-響應式</button>
29 
     <button @click="btn12Click">通過Vue.set()進行陣列修改-響應式</button>
30 
31   </div>
32   <div>
33     <button @click="btn9Click">陣列翻轉reverse()-響應式</button>
34   </div>
35   <div>
36     <button @click="btn10Click">陣列排序sort()-響應式</button>
37   </div>
38 
39   <h2>{{ message }}</h2>
40   <ul>
41     <li v-for="item in letters" >{{ item }}</li>
42   </ul>
43 
44 </div>
45 <script src="../js/vue.js"></script>
46 <script>
47   const app = new Vue({
48     el: '#app',
49     data: {
50       message: '陣列方法是響應式的',
51       letters: ['1', '2', '3', '4', '5']
52     },
53     methods: {
54       btn1Click() {
55         this.letters.push(Math.ceil(Math.random() * 10));
56       },
57       btn2Click() {
58         this.letters.push('btn2-' + Math.ceil(Math.random() * 10), 'btn2-2', 'btn2-3');
59       },
60       // 以上結論push為響應式
61       btn3Click() {
62         this.letters.pop();
63       },
64       // 以上結論pop為響應式
65       btn4Click() {
66         this.letters.shift(Math.ceil(Math.random() * 10));
67       },
68       btn5Click() {
69         this.letters.unshift('btn5-' + Math.ceil(Math.random() * 10), 'btn5-' + Math.ceil(Math.random() * 10));
70       },
71       btn6Click(){
72         this.letters.splice(1,1)
73       },
74       btn8Click(){
75         this.letters.splice(1,0,'insert')
76       },
77       btn7Click(){
78         let tmp = this.letters.length;
79         if(tmp!=0){
80           this.letters[tmp-1] = 'random'
81         }
82       },
83       btn9Click(){
84         this.letters.reverse();
85       },
86       btn10Click(){
87         this.letters.sort();
88       },
89       btn11Click(){
90         this.letters.splice(0,1,'modifyBySplice')
91       },
92       btn12Click(){
93         Vue.set(this.letters,0,'modifyByVue.set()')
94       }
95     }
96   })
97 </script>
98 </body>
99 </html>