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支持可选的第二个参数作为当前项的索引，语法格式为(item, index) in items。

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

遍历对象属性

v-for也可以遍历对象的属性，语法格式为value in object，或者添加第二个参数为键名(value, key)，第三个参数为索引(value, key, index)。

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

使用key属性

为维护内部组件状态，建议为每个v-for项提供唯一的key属性。key应该是字符串或数值类型的唯一标识。

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

遍历数字范围

v-for可以直接接受整数，模板会被重复对应次数。

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

在组件上使用v-for

在自定义组件上使用v-for时，必须绑定key属性，并且数据需要通过props传递。

<my-component
  v-for="(item, index) in items"
  :key="item.id"
  :item="item"
  :index="index"
></my-component>

数组更新检测

Vue对以下数组变更方法进行了包裹，调用这些方法会触发视图更新：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。直接通过索引设置项或修改数组长度不会触发更新，应使用Vue.set或数组的splice方法。

// 不会触发视图更新
this.items[index] = newValue
// 正确方式
this.$set(this.items, index, newValue)
// 或
this.items.splice(index, 1, newValue)