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>