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