在 Vue 中,循环语句主要通过 v-for 指令来实现,用于遍历数组或对象,生成对应数量的元素。
在元素上使用 v-for 指令,根据源数据的数组或对象进行循环渲染元素。
遍历数组
v-for="(item, index) in items"
遍历对象
v-for="(value, key, index) in object"
- key 的作用: 使用
v-for
渲染列表时,必须为每个项提供一个唯一的key
属性,以便 Vue 能够识别每个项的唯一性,从而进行高效的 DOM 更新。 - 嵌套循环: 可以嵌套使用多个
v-for
来渲染多维数组或对象结构。
v-for 可以绑定数据到数组来渲染一个列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"