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>