Vue教程04：v-for指令

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

v-for循環數組、對象

代碼參考：/lesson04/01. v-for指令.html

使用v-for="(item, index) in items"就能夠將數組或對象中的數據循環輸出。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    users: [
      { name: 'lee', password: '123456' },
      { name: 'zhangsan', password: '654321' },
      { name: 'lisi', password: '111111' },
    ],
    usersObj: {
      lee: '123456',
      zhangsan: '654321',
      lisi: '111111'
    }
  }
})
複製代碼

HTML：

<div id="app">
  <ul>
    <li v-for="(item, index) in users" :key="index">
      {{index}}.
      用戶名：{{item.name}}
      密碼：{{item.password}}
    </li>
  </ul>
  <ol>
    <li v-for="(value, key) in usersObj" :key="index">
      用戶名：{{key}}
      密碼：{{value}}
    </li>
  </ol>
</div>
複製代碼

v-for指令循環字符串、數字

代碼參考：/lesson04/02. v-for指令循環字符串、數字.html

v-for指令除了常規循環數組、對象外，還能夠循環字符串和數字，須要注意的是，循環數字時默認從1開始。

JavaScript：

let vm = new Vue({
  el: '#app', // 根元素或掛載點。
  data: {
    str: 'Vuejs Tutorial'
  }
})
複製代碼

HTML：

<div id="app">
  <ul>
    <li v-for="(item, index) in str" :key="index">
      {{item}}
    </li>
  </ul>
  <ul>
    <li v-for="index in 10" :key="index">
      {{index}}
    </li>
  </ul>
</div>
複製代碼

Key屬性

在v-for循環中，爲循環的標籤添加key屬性是必須的。 添加key屬性的緣由要從虛擬DOM提及。通俗地說，虛擬DOM就是一個JSON，假設咱們有一段這樣的HTML：

<ul>
  <li>
    <span></span>
    <strong></strong>
  </li>
  <li>
    <span></span>
    <strong></strong>
  </li>
</ul>
複製代碼

Vue在執行時，會將這個結構解析成相似於這樣的形式：

{
  tag: 'ul',
  children: [
    {
      tag: 'li',
      children: [
        {
          tag: 'span',
          tag: 'strong'
        }
      ]
    },
    {
      tag: 'li',
      children: [
        {
          tag: 'span',
          tag: 'strong'
        }
      ]
    }
  ]
}
複製代碼

在數據更新時，Vue會先在虛擬DOM中判斷將要修改的內容，也能夠在積累必定更新以後，再一次性渲染到頁面中，這樣能夠減小頁面渲染的次數，增長性能。

假設咱們有一個數組的數據，在咱們進行增刪改查操做時，咱們不但願進行每次操做的時候，將整個列表所有從新渲染，而Vue很難判斷咱們操做的是哪一個item。

例如咱們將items[1]替換成其餘值，Vue很難判斷它是否被替換。固然Vue內部會生成一個key值，但這個值與咱們傳入的數據無關，所以須要咱們提供一個id進行判斷。

同時爲了保證數據的惟一性，key必須是惟一的，且不可改變。