检测数组更新
因為Vue是響應式的，所以當數據發生變化時，Vue會自動檢測數據變化，視圖會發生對應的更新。
Vue中包含了一組觀察數組編譯的方法，使用它們改變數組也會觸發視圖的更新。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><ul><li v-for="item in letters">{{item}}</li></ul><button @click="btnClick">按鈕</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {letters: ['a', 'b', 'c', 'd']},methods: {btnClick() {// 1.push方法// this.letters.push('aaa')// this.letters.push('aaaa', 'bbbb', 'cccc')// 2.pop(): 刪除數組中的最后一個元素// this.letters.pop();// 3.shift(): 刪除數組中的第一個元素// this.letters.shift();// 4.unshift(): 在數組最前面添加元素// this.letters.unshift()// this.letters.unshift('aaa', 'bbb', 'ccc')// 5.splice作用: 刪除元素/插入元素/替換元素// 刪除元素: 第二個參數傳入你要刪除幾個元素(如果沒有傳,就刪除后面所有的元素)// 替換元素: 第二個參數, 表示我們要替換幾個元素, 后面是用于替換前面的元素// 插入元素: 第二個參數, 傳入0, 并且后面跟上要插入的元素// splice(start)// splice(start):this.letters.splice(1, 3, 'm', 'n', 'l', 'x')// this.letters.splice(1, 0, 'x', 'y', 'z')// 5.sort()// this.letters.sort()// 6.reverse()// this.letters.reverse()// 注意: 通過索引值修改數組中的元素// this.letters[0] = 'bbbbbb';// this.letters.splice(0, 1, 'bbbbbb')// set(要修改的對象, 索引值, 修改后的值)// Vue.set(this.letters, 0, 'bbbbbb')}}})// function sum(num1, num2) {// return num1 + num2// }//// function sum(num1, num2, num3) {// return num1 + num2 + num3// }// function sum(...num) {// console.log(num);// }//// sum(20, 30, 40, 50, 601, 111, 122, 33)</script></body> </html>
?
總結
- 上一篇： v-for遍历数组 || v-for遍历
- 下一篇： 原生 AJAX的相关介绍