Vue.js 循环语句

在 Vue.js 中，我们经常需要对数据进行循环操作，例如渲染列表、表格等。Vue.js 提供了 v-for 指令来帮助我们实现循环操作。

基本语法

v-for 指令的基本语法如下：

<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

其中，items 是一个数组，item 是数组中的每个元素，我们可以通过 item.name 来访问每个元素的属性。:key 属性用于指定每个元素的唯一标识，以提高性能。

在列表中循环渲染元素

假设我们有一个包含学生信息的数组：

// www.javascriptcn.com code example
data() {
  return {
    students: [
      { id: 1, name: 'Alice', age: 20 },
      { id: 2, name: 'Bob', age: 22 },
      { id: 3, name: 'Cathy', age: 21 }
    ]
  }
}

我们可以使用 v-for 指令在页面中渲染这些学生信息：

<div v-for="student in students" :key="student.id">
  <p>{{ student.name }} - {{ student.age }}</p>
</div>

在表格中循环渲染数据

除了列表，我们也可以在表格中循环渲染数据：

// www.javascriptcn.com code example
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr v-for="student in students" :key="student.id">
    <td>{{ student.name }}</td>
    <td>{{ student.age }}</td>
  </tr>
</table>

使用 v-for 遍历对象

除了数组，我们也可以使用 v-for 遍历对象的属性：

// www.javascriptcn.com code example
data() {
  return {
    user: {
      id: 1,
      name: 'Alice',
      age: 20
    }
  }
}

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

以上就是关于 Vue.js 循环语句的基本用法，通过 v-for 指令，我们可以方便地对数据进行循环操作。