Vue3 循环语句

Vue3 循环语句

引言

在Vue3框架中，循环语句是处理数组或对象集合的常用方法。本文将详细介绍Vue3中的循环语句，包括它们的基本用法、性能优化以及与旧版Vue2的区别。

基本用法

v-for 指令

Vue3中，v-for 指令用于基于一个数组渲染一个列表。其基本语法如下：

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

在上面的例子中，items 是一个包含多个对象的数组。每个对象都包含一个 id 和一个 name 属性。v-for 指令遍历 items 数组，并将每个元素渲染到 div 标签中。

:key 属性

在使用 v-for 指令时，建议为每个渲染的元素添加一个唯一的 key 属性。这有助于Vue更高效地更新和重用元素。

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

在上面的例子中，item.id 作为 key 的值，确保了每个元素在列表中的唯一性。

循环对象

Vue3还支持在对象上使用 v-for 指令。以下是一个示例：

<div v-for