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>
