Vuejs学习笔记(一)-13.修改数组方式-响应式 

 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>

 

posted @ 2021-07-01 15:03  kaer_invoker  阅读(135)  评论(0)  编辑  收藏  举报