v-for 指令：用于循环渲染列表数据。
v-for 指令：可以循环数组、对象、字符串【不常用】、指定次数【很少用】。
key 属性：用于给标签添加一个唯一的标识。
key 属性：推荐使用 id、手机号、身份证号、学号 等唯一值。
注：当数据改变后，Vue 会对比 key 属性，只更新被修改的内容，以减少不必要的更新。
语法格式：
// 循环数组 <div v-for="(项目, 下标) in 数组" :key="标识">内容</div> // 循环对象 <div v-for="(键值, 键名) in 对象" :key="标识">内容</div> // 循环字符串 <div v-for="(字符, 下标) in 字符串" :key="标识">内容</div> // 指定循环次数 <div v-for="(数字, 下标) in 次数" :key="标识">内容</div> // 也可以用 of 替代 in 作为分隔符，效果一样 <div v-for="(项目, 下标) of 数组" :key="标识">内容</div>
循环数组【常用】：
<template> <h3>循环渲染 v-for</h3> <ul> <li v-for="(item, index) in data" :key="item.id"> {{ index }} - {{ item.name }} - {{ item.age }} </li> </ul> </template> <script setup> import { reactive } from "vue"; let data = reactive([ { id: 1, name: "张三", age: 21 }, { id: 2, name: "李四", age: 18 }, { id: 3, name: "王五", age: 26 }, ]); </script>
效果：
注：item 表示数组中的每一项、index 表示循环的下标、data 表示循环的数据。
循环对象：
<template> <h3>循环渲染 v-for</h3> <ul> <li v-for="(val, k) in car" :key="k"> {{ val }} - {{ k }} </li> </ul> </template> <script setup> import { reactive } from "vue"; let car = reactive({ name: "奥迪A8", price: "70万", color: "黑色" }); </script>
注：val 表示对象中的值、k 表示对象中的键名、car 表示循环的对象。
循环字符串：
<template> <h3>循环渲染 v-for</h3> <ul> <li v-for="(char, index) in str" :key="index"> {{ char }} - {{ index }} </li> </ul> </template> <script setup> import { ref } from "vue"; let str = ref("hello"); </script>
