技術標籤：vuevuejavascript

v-for遍歷陣列

<div id="app">
    <!-- 在遍歷過程中沒有使用下標值 -->
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>
    <!-- 在遍歷過程中，獲取索引值 -->
    <ul>
      <li v-for="(item,index) in names">
 
{{index+1}}.{{item}}</li>
    </ul>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        names: ["why", "kobe", "james", "curry"]
      }
    })
  <
 
/script>

v-for遍歷物件

<div id="app">
    <!--1. 在遍歷過程中如果只是獲取一個值，那麼獲取到的是value-->
    <ul>
      <li v-for="item in info">{{item}}</li>
    </ul>

    <!-- 2. 獲取key和value,格式（value,key)-->
    <ul>
      <li v-for="(value,key) in info"
 
>{{value}}:{{key}}</li>
    </ul>

    <!-- 3. 獲取key和value,index 格式（value,key, index)-->
    <ul>
      <li v-for="(value,key,index) in info">{{value}}:{{key}} {{index}}</li>
    </ul>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        info: {
          name: "why",
          age: 18,
          height: 1.88
        }
      }
    })
  </script>

檢測陣列更新

Vue是響應式的，所以資料發生變化時,Vue會自動檢測資料變化，檢視會發生對應的更新。Vue中包含了一組觀察陣列編譯的方法，使用它們改變陣列也會觸發檢視的更新。

 <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")

          // 2. pop方法:刪除陣列中的最後一個元素
          // this.letters.pop()

          // 3.shift方法：刪除陣列中的第一個元素
          // this.letters.shift()

          // 4.unshift方法: 在陣列最前面新增元素
          // this.letters.unshift("aaa");

          // 5.splice方法 ：刪除元素/插入元素/替換元素
          // 刪除元素:第二個引數傳入你要刪除幾個元素（如果沒有穿，就刪除後面所有元素）
          // 替換元素:第二個引數表示我們要替換的幾個元素，後面的用於替換前面的元素。
          // 插入元素:第二個引數為0,後面跟上要插入的函式。
          // this.letters.splice(1, 0, "aa", "bb", "cc")

          // 6.sort()
          // this.letters.sort();

          //7.reverse()
          // this.letters.reverse();

          //注意：通過索引值修改陣列中的元素,不響應，介面不重新整理
          // this.letters[0] = "bbbbb";

          //可以通過splice()實現
          // this.letters.splice(0, 1, "bbbbb");

          //Vue自帶的set方法也可以修改
          //set(要修改的物件，索引值，修改後的值)
          Vue.set(this.letters, 0, "bbbbb")
        }
      }
    })
  </script>