企业官网建设流程全解析

同样的需要配置环境以及创建vue3，不会的宝宝可以看一下上一篇文章哦~

接下来我们进入今天的内容学习

先看代码，同样我引用老师课堂上的代码

<template> <h2>实验1. 遍历数组：(item, index) in 数组</h2> <!-- :key 是 v-bind 的应用，给每一项一个唯一标识，帮助 Vue 高效更新 --> <!-- 实际开发中 :key 优先用唯一 id；这里数组是纯字符串，只能用 index --> <!-- 现在拿到的是数组的值和索引 --> <p v-for="(value, index) in students" :key="index"> {{ index }} 号同学：{{ value }} </p> <button @click="addStudent">添加一名同学</button> <h2>实验2. 遍历对象数组（最常用）</h2> <!-- value 是整个对象，用点语法取属性 --> <!-- 现在拿到的是数组的值 --> <p v-for="value in goods" :key="value.id"> {{ value.name }} —— ¥{{ value.price }} </p> <h2>实验3. 遍历对象：(值, 键) in 对象</h2> <!-- 现在拿到的是对象的值和键 --> <p v-for="(value, key) in teacher" :key="key"> {{ key }} : {{ value }} </p> <h2>实验4. 遍历数字：n in 5（从 1 开始，共 5 次）</h2> <p v-for="n in 5" :key="n"> {{ n }} </p> </template> <script setup> import { ref } from 'vue' // 1. 遍历数组（基本类型）：存放一组姓名 const students = ref(['张三', '李四', '王五']) // 2. 遍历数组（对象类型）：实际开发中最常见，如商品列表 const goods = ref([ { id: 1, name: '枸杞', price: 30 }, { id: 2, name: '当归', price: 45 }, ]) // 3. 遍历对象：拿到的是"键值对" const teacher = ref( { name: '韩梅梅', age: 19, course: 'Vue3' }) // 点击按钮往数组添加数据，页面会自动多一行（响应式更新） function addStudent() { students.value.push( '新同学' + (students.value.length + 1) ) } </script> <style scoped></style> <!-- ============================================ 【总结】v-for 到底是干嘛的？ ============================================ 一句话：v-for 就是"照着名单发座位"。 你给 Vue 一份名单（数组 / 对象 / 数字）， 它就按顺序给名单里的每一项，复制出一个一模一样的标签。 生活中的例子： - 点名册上有 3 个名字 → 页面自动出现 3 行 - 点名册变成 4 个名字 → 页面自动变成 4 行 （我们只改了数据，从没手动加过 HTML！这就是响应式） 四种名单都能发： 1. 数组：每个名字发一行，还能告诉你"你是第几号"（index） 2. 对象数组：最常用，每个对象发一张"详细卡片" 3. 对象：发"键值对"，一个键配一个值 4. 数字：写 n in 5，等于把 1~5 各发一个 为什么每项要写 :key？ 就像每个学生要有唯一学号， Vue 靠它认人："这行数据对应哪个标签"， 名单变化时才能找对行、快速更新，不会认错人。 -->

运行结果如图所示

4 种 v-for 用法

1. 基础数组：v-for="(value, index) in 数组"index 是下标，修改数组数据，页面自动更新。简单无 id 数组可用 index 作为 key。
2. 对象数组（开发最常用）：v-for="item in 数组"item 为对象，用item.属性取值，key 优先使用业务 id。
3. 普通对象：v-for="(value, key) in 对象"遍历拿到属性名 key 和属性值 value。
4. 数字遍历：v-for="n in 5"循环 5 次，n 从1 开始。

key 作用

key 相当于每条数据的唯一标识，帮助 Vue 高效更新 DOM，防止列表渲染错乱。

推荐：唯一业务 id ⚠️ 仅简单静态数组，才用 index

一句话总结就是v-for根据数据批量生成页面标签，只改 JS 数据，不用手动操作 DOM，Vue 响应式列表渲染。

大家快去尝试一下