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必须是唯一的，且不可改变。