Vue 循環遍歷 v-for

v-for遍歷數組

• 渲染一組數據的時候用 v-for
• v-for的語法類似於JavaScript中的for循環
• 格式如下：item in items的形式

我們來看一個簡單的案例：

如果在遍歷的過程中不需要使用索引值

• v-for="movie in movies"
• 依次從movies中取出movie，並且在元素的內容中，我們可以使用Mustache語法，來使用movie

如果在遍歷的過程中，我們需要拿到元素在數組中的索引值呢？

• 語法格式：v-for=(item, index) in items
• 其中的index就代表了取出的item在原數組的索引值。

v-for可以用戶遍歷對象：

• 比如某個對象中存儲着你的個人信息，我們希望以列表的形式顯示出來。

<div id="app">
  <ul>
    <li v-for="(value, key, index) in info">
      {{index}}-{{value}}-{{key}}
    </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>

Array: (item,index) in Array

• item 是數組的遍歷
• index 是數組的索引
• 可以用其它的參數代替，但是在后面也得寫成一樣的參數，盡量避免命名的沖突

更改數組

1. 不能通過索引的方式更改數組，這樣不會渲染頁面
2. 不能通過更改長度的方式更改數組，也不會渲染頁面

檢測數組更新

• 因為Vue是響應式的，所以當數據發生變化時，Vue會自動檢測數據變化，視圖會發生對應的更新。

• Vue中包含了一組觀察數組編譯的方法，使用它們改變數組也會觸發視圖的更新。

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

obj: (value,key,index) in obj

• value 對象的 value 值
• key 對象的 key 值
• index 對象的索引

更改對象

1. 向對象內添加或者刪除屬性不會渲染頁面
2. 使用$set()方法
   • 語法this.$set(obj, key, value)
     - obj： 需要修改的對象
     - key: 對象的key值
     - value： 想添加或者修改的值
     - 將 key 值改成索引也客園修改數組
3. Object.defineProperty

num:num is number

從 1 開始遍歷到這個數字

String

遍歷字符串的全部字母

key屬性

• 只能用在Array和string中,值是唯一的
• vue不會去改變原有的元素和數據，而是創建新的元素然后把新的數據渲染進去
• 在使用v-for的時候，vue里面需要我們給元素添加一個key屬性，這個key屬性必須是唯一的標識
• 給key賦值的內容不能是可變的，可以用索引添加

1. 在寫v-for的時候，都需要給元素加上一個key屬性
2. key的主要作用就是用來提高渲染性能的！
3. key屬性可以避免數據混亂的情況出現 （如果元素中包含了有臨時數據的元素，如果不用key就會產生數據混亂）

注意，千萬不要將 v-for 和 v-if 一起使用。

<div v-for='item in datas' v-if='isShow'></div>

• v-for 的優先級始終比 v-if 高，無論先后順序。
• 所以兩個指令同時存在時總是先生成迭代邏輯，再在迭代邏輯中進行genIf的處理，最后在整個迭代里每項都進行一次判斷，對性能造成浪費。
• 將v-if提取到v-for之外，如果判斷參數出現在迭代數據項里，可以結合computed來過濾迭代項后再進行渲染。