v-for 循环

<div id="app">
  <ul>
    <li v-for="bird in birds" :class="bird">{{bird}}</li>
  </ul>
</div>

对应的HTML渲染：

v-for 属性的值是 js 的循环表达式，默认对数组进行循环时，会遍历所有的元素并复制当前html元素对其应用。

获取下标

如果想得到元素在数组的下标，需要增加一个循环变量：

<li v-for="(bird, index) in birds" :class="bird">
  {{bird}} + {{index}}
</li>

对象属性遍历

如果数组元素是一个对象，而我们要循环输出对象的属性，则继续使用 v-for 不过此时想获取下标时，需要在前面设定所有对象的属性后再加上下标：

<li v-for="person in people">
  <div v-for="(key, value, index) in person">
    {{key}}:{{value}} - Index: {{index}}
  </div>
</li>

用key进行索引追踪

当数据经过一些复杂的修改，被添加或删除到其他地方时，Vue 可能会只更新必要的值而放弃其他我们也想让它更新的值。因此我们需要用 key 属性来绑定数据，其值必须是在遍历中唯一确定的值。

如按下按钮后会将第一个元素放到第最后一个位置上，此时输入框中的内容并不会一起过去，也就是说Vue仅仅只更新html中的值，而非直接删去元素再次更新。

<div id="app">
  <button type="button" class="move" @click="move">
    Move to Bottom
  </button>
  <div class="card" v-for="person in people">
    <h3>{{person.name}}</h3>
    <p>{{person.message}}</p>
    <input type="text" />
  </div>
</div>

因此可以加上 key 来绑定到唯一标识符，此时所有内容都会随着其变化而更换位置。

<div id="app">
  <button type="button" class="move" @click="move">
    Move to Bottom
  </button>
  <div class="card" v-for="person in people" :key="person">
    <h3>{{person.name}}</h3>
    <p>{{person.message}}</p>
    <input type="text" />
  </div>
</div>