Vue 3 指南：列表渲染的艺术

2024-01-18 22:08:25

使用 v-for 指令，我们可以根据数组渲染一系列项目。v-for 的强大功能在于，它允许我们创建动态列表，这些列表会根据底层数组中的更改自动更新。

拥抱 `v-for` 的简洁性

v-for 的语法非常简洁明了：

<template v-for="item in items">
  <!-- 在此渲染单个项目的模板 -->
</template>

在这个示例中，items 是一个数组，而 item 是数组中的每个元素。v-for 会遍历数组并为每个元素渲染模板。

遍历对象和数组

v-for 不仅限于遍历数组，它还可以遍历对象：

<template v-for="obj in objects">
  <!-- 在此渲染单个对象属性的模板 -->
</template>

这允许我们创建动态表格或其他需要从对象中提取数据的组件。

`v-for` 与范围变量

在 v-for 循环中，我们可以访问以下范围变量：

index：元素在数组中的索引
key：元素的唯一标识符
value：元素的值

范围变量为我们提供了控制渲染过程的强大功能。例如，我们可以使用 index 变量来创建交替行的样式。

解锁自定义渲染

v-for 的真正力量在于其自定义渲染能力。我们可以使用 template、render 函数或 scoped 插槽来完全控制列表渲染过程。

通过使用这些高级技术，我们可以创建高度动态和交互式列表，这些列表可以满足任何应用程序的需求。

实例时间：购物车组件

让我们通过一个购物车组件的示例来展示 v-for 的实际应用：

<template>
  <ul>
    <li v-for="item in cart" :key="item.id">
      {{ item.name }} - {{ item.quantity }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { id: 1, name: 'Apple', quantity: 2 },
        { id: 2, name: 'Orange', quantity: 1 },
        // ... 其他商品
      ],
    };
  },
};
</script>