Vue 中列表渲染指令 v-for 的基本用法详解

Vue 中的 v-for 指令可以用来遍历数组和对象，将每个元素映射为一个节点，并生成相应的列表。

遍历数组

在 Vue 中，我们可以使用 v-for 指令来遍历数组。

语法：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

其中 items 是一个数组，item 代表数组中的每一项。在模板中用 {{ item }} 来显示每一项的值。

示例：

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

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange', 'Watermelon']
    }
  }
}
</script>

在这个示例中，我们定义了一个包含四个元素的数组 items，并使用 v-for 指令遍历该数组，将每个元素显示为一个列表项。注意，我们在列表项中添加了 :key="index" 属性，这是为了能够高效地处理列表项的变化。

遍历对象

除了数组，Vue 中的 v-for 指令还可以遍历对象。

语法：

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

其中 object 是一个对象，value 代表对象中的每个值，key 代表对象中的每个键。在模板中用 {{ key }} : {{ value }} 将其显示为一个键值对。

示例：

<template>
  <div>
    <div v-for="(value, key) in object" :key="key">
      {{ key }} : {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: '张三',
        age: 18,
        sex: '男'
      }
    }
  }
}
</script>

在这个示例中，我们定义了一个包含三个属性的对象 object，并使用 v-for 指令遍历该对象，将每个属性显示为一个键值对。

小结

在 Vue 中，v-for 指令可以用来遍历数组和对象，将每个元素映射为一个节点，并生成相应的列表。除了基本用法外，v-for 指令还有很多高级用法，如遍历循环中的索引、遍历对象属性的值等，请自行查阅文档。