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 属性用于指定每个元素的唯一标识，以提高性能。

在列表中循环渲染元素

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

-- -------------------- ---- -------
------ -
  ------ -
    --------- -
      - --- -- ----- -------- ---- -- --
      - --- -- ----- ------ ---- -- --
      - --- -- ----- -------- ---- -- -
    -
  -
-

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

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

在表格中循环渲染数据

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

-- -------------------- ---- -------
-------
  ----
    -------------
    ------------
  -----
  --- -------------- -- --------- ------------------
    ------ ------------ -------
    ------ ----------- -------
  -----
--------

使用 v-for 遍历对象

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

-- -------------------- ---- -------
------ -
  ------ -
    ----- -
      --- --
      ----- --------
      ---- --
    -
  -
-

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

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