Vue.js中的v-for

Vue.js 中的 v-for 是一个指令，用于在 Vue 实例的数据集合上进行循环操作，渲染多个元素。以下是一个简单的 v-for 的用法教程：

转载请标明出处:blog.tsaqhm.cn

基本用法

假设你有一个数组，你可以使用 v-for 来遍历数组的每一项，然后渲染相应的元素。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

在这个例子中，v-for 循环遍历 items 数组，对于数组中的每个元素，都会渲染一个 <li> 元素，并显示相应的内容。

获取索引值

有时你可能需要获取循环过程中的索引值，你可以使用 v-for 的第二个参数来实现这个目的。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

在这个例子中，index 是数组元素的索引，通过 {{ index + 1 }} 来显示从 1 开始的序号。

对象的遍历

除了数组，v-for 也可以用于遍历对象的属性。

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

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
        occupation: 'Developer'
      }
    };
  }
};
</script>

在这个例子中，key 是对象属性的键，value 是相应的值。

这只是 v-for 的一些基本用法，还有其他一些高级用法，比如在循环中使用 v-if 进行条件渲染、使用 v-for 遍历对象的属性值等。Vue.js 官方文档中有更详细的信息，建议查阅官方文档以获取更全面的了解：Vue.js - 列表渲染。