编写 Vue v-for 循环的 7 种方式

1. 基础使用方式

Vue 的 v-for 指令可以很方便地遍历数组或对象，如下所示：

<ul>
  <li v-for="(item, index) in items">{{ item }}，索引：{{ index }}</li>
</ul>

其中，item 表示被遍历的当前元素，index 表示当前元素在数组中的索引值。

2. 遍历对象

实际上，v-for 指令也可以用于遍历对象，如下所示：

<ul>
  <li v-for="(value, key, index) in obj">{{ key }}: {{ value }}，索引：{{ index }}</li>
</ul>

其中，value 表示对象中每个键对应的值，key 表示当前对象键名，index 表示当前元素在对象中的索引值。

3. 使用 v-for 和 v-bind:key 遍历元素

在使用 v-for 指令时，需要为每个元素设置一个独一无二的 key 值，以便 Vue 根据新旧节点之间的关系可以高效的渲染元素，如下所示：

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

4. 用 v-for 和 v-if 遍历过滤后的数组

v-for 指令可以与 v-if 指令一起使用，来筛选出符合条件的元素进行渲染，如下所示：

<ul>
  <li v-for="(item, index) in items" v-if="item.show">{{ item.text }}</li>
</ul>

5. 使用 v-for 和组件渲染列表

在父组件中使用 v-for 指令遍历数据并渲染出子组件，子组件接收父组件传递的 props，来显示对应的内容，如下所示：

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

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      items: [
        {
          name: '标题1',
          content: '内容1'
        },
        {
          name: '标题2',
          content: '内容2'
        }
      ]
    }
  }
}
</script>

6. 使用 v-for 和计算属性渲染列表

在 Vue 中可以将多个数据源进行计算得出需要的数据再进行遍历渲染，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in computedItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4]
    }
  },
  computed: {
    computedItems() {
      return this.list.map(item => item * 2)
    }
  }
}
</script>

7. 用 v-for 遍历多维数组

在 vue 中，v-for 指令可以遍历多维数组，只需要添加多个 v-for 指令即可，如下所示：

<ul>
  <li v-for="(item, index) in items">
    <span v-for="(value, key) in item">{{ key }}: {{ value }}，</span>索引：{{ index }}
  </li>
</ul>

以上就是编写 Vue v-for 循环的 7 种方式的完整攻略，希望能对大家有所帮助！