vue 实现循环

循环渲染列表数据

在 Vue 中，可以使用 v-for 指令来循环渲染数组或对象的数据。v-for 指令需要特殊的语法形式 item in items，其中 items 是源数据数组，item 是被迭代的数组元素的别名。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>

获取当前索引

可以在 v-for 块中访问父作用域的属性，还可以使用第二个参数作为当前项的索引。

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

遍历对象

v-for 也可以遍历对象的属性，提供第二个参数为属性名，第三个参数为索引。

<ul>
  <li v-for="(value, name, index) in object" :key="index">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

维护状态

为了给 Vue 一个提示以便跟踪每个节点的身份，需要为每项提供一个唯一的 key 属性。理想的 key 值是每项都有唯一 id。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

数组更新检测

Vue 对数组的变更方法进行了包裹，这些方法会触发视图更新，包括 push()、pop()、shift()、unshift()、splice()、sort() 和 reverse()。

显示过滤/排序后的结果

想要显示过滤或排序后的结果而不实际变更原始数据，可以创建一个计算属性返回过滤或排序后的数组。

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive)
  }
}

在 v-for 里使用范围值

v-for 可以接受整数，模板会基于 1...n 的范围重复多次。

<span v-for="n in 10" :key="n">{{ n }}</span>

在 <template> 上使用 v-for

可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。

<ul>
  <template v-for="item in items" :key="item.id">
    <li>{{ item.message }}</li>
    <li class="divider"></li>
  </template>
</ul>

v-for 与 v-if 一起使用

不推荐在同一元素上使用 v-if 和 v-for，当它们处于同一节点时，v-for 的优先级比 v-if 更高。建议使用计算属性过滤列表数据。

computed: {
  activeItems() {
    return this.items.filter(item => !item.isActive)
  }
}