檢測陣列更新

小草dym發表於2020-11-14
陣列

因為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>

 

相關文章