Vue可响应式数组方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div id="app">
10   <ul>
11     <li v-for="i in letters">{{i}}</li>
12   </ul>
13 
14   <button @click="btnClick">按钮</button>
15 </div>
16 
17 <script src="../vuejs/vue.js"></script>
18 <script>
19   const app = new Vue({
20     el: '#app',
21     data: {
22       message: "",
23       letters: ["a","b","d","c"],
24     },
25     methods: {
26       btnClick(){
27         // ...items类似于python *args
28         // 1. .push方法，在最后添加，可同时添加多个
29         // this.letters.push("A","B")
30 
31         // 2. .pop() 删除数组中的最后一个元素
32         // this.letters.pop()
33 
34         // 3.  .shift()方法，删除数组中的第一个元素
35         // this.letters.shift()
36 
37         // 4.  .unshift()方法，在数组最前面添加元素
38         // this.letters.unshift("A","B")
39 
40         //splice(start: number, deleteCount: number, ...items: T[]): T[];
41         // 5.  .splice方法，作用：删除元素/替换元素/插入元素
42         // 第一个参数：位置参数
43         // 删除元素：第二个元素传入你要删除几个元素（如果没传，就删除位置后面的所有元素）
44         //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素（可理解为前面删除，后面追加）
45        // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
46        //  this.letters.splice(1,2)
47        //  this.letters.splice(1,2,"A","B","C")
48        //  this.letters.splice(1,0,"A","B","C")
49 
50       //  6.  .sort  排序
51       //   this.letters.sort()
52 
53         // 7.  .reverse方法，反转
54         // this.letters.reverse()
55 
56  // 8.注意，通过索引值修改数组中的元素不是Vue的响应式
57  //            this.letters[0] = "bbbbbb";
58         // 可以用splice纠正
59         //       this.letters.splice(0,1,"bbbbbb")
60 
61       //  9.  Vue内部方法：
62         //  set（要修改的对象，索引值，修改后的值）
63         // Vue.set(this.letters,0,"修改啦")
64       },
65     }
66   })
67 </script>
68 </body>
69 </html>
Vue可响应式数组方法

猜你喜欢
