uniApp打卡学习第04天：v-for 列表循环渲染 + key 属性 + 学生数据列表

项目：edu_demo

页面：pages/index/index.vue

今日核心：学会循环显示学生列表（教务系统最常用）

难度：★★☆☆☆

代码：逐行注释 + 可直接复制运行

一、今日核心知识点笔记（必须背）

1. v-for作用：循环遍历数组，批量渲染页面列表

2. 语法：v-for="(item, index) in 数组名" :key="index"

3. item：代表数组里的每一条数据（比如每一个学生对象）

4. index：代表数组下标（从 0 开始的编号）

5. :key="index"必须写！Vue 用来优化渲染，不写会报错 / 页面错乱

6. 学生数据格式：数组里放对象

stuList: [ { name: "张三", grade: "高一", subject: "物理" }, { name: "李四", grade: "高二", subject: "物理" }, { name: "王五", grade: "高三", subject: "物理" }, { name: "赵六", grade: "高一", subject: "数学" }, { name: "孙七", grade: "高二", subject: "数学" } ]

二、今日学习页面

页面：pages/index/index.vue

三、完整代码 + 逐行终极注释

<!-- ======================== 页面结构区域：写HTML、显示内容 ========================= --> <template> <!-- 根容器：所有内容必须放在一个 view 里面 --> <!-- class="content" 用于设置页面整体内边距 --> <view class="content"> <!-- ======================== 1. 插值表达式 {{ }} 渲染文字 把 data 里的 titleName 显示在页面上 ========================= --> <view class="page-title">{{ titleName }}</view> <view class="page-title">{{ msg }}</view> <!-- ======================== 2. v-bind 简写 :src 动态绑定图片地址 图片路径来自 data 里的 imgUrl mode="widthFix" 表示宽度固定，高度自动等比缩放 ========================= --> <image :src="imgUrl" class="show-img" mode="widthFix"></image> <!-- ======================== 3. v-bind 简写 :class 动态绑定样式 isRed 为 true → 用 red 类（红色字体） isRed 为 false → 用 normal 类（黑色字体） 语法：三元表达式 → 条件 ? 真值 : 假值 ========================= --> <view :class="isRed ? 'text-red' : 'text-normal'"> 动态样式文字：我会根据变量变色 </view> <!--按钮1：@click绑定changeTitle方法，点击修改页面标题--> <u-button @click="changeTitle" type="primary">点击修改标题</u-button> <!--按钮2：@click绑定showTips方法，点击弹出系统提示框--> <u-button @click="showTips" type="success">点击弹窗提示</u-button> <!--按钮3：@click绑定changeColor方法，点击切换字体颜色--> <u-button @click="changeColor" type="warning">切换字体颜色</u-button> <!--按钮4：@click绑定changeText方法，点击切换文字内容--> <u-button @click="changeText" type="warning">修改msg文字内容</u-button> <!-- ============================== 今日核心:v-for 循环渲染学生列表 1. stuList：是data里的学生数组 2. item：代表每一条学生数据 3. index：是下标，从O开始 4. :key="index"：必须写！不然会报错，格式错乱 ================================= --> <view class="list-title">学生列表</view> <view class="stu-list"> <!--循环开始--> <view class="stu-item" v-for="(item, index) in stuList" :key="index"> <!--显示学生姓名--> <view>姓名：{{item.name}}</view> <!--显示年级--> <view>年级：{{item.grade}}</view> <!--显示科目--> <view>科目：{{item.subject}}</view> </view> </view> </view> </template> <!-- ======================== JS 逻辑区域：定义数据、写方法 ========================= --> <script> // 默认导出 Vue 页面实例 export default { // ======================== // data：页面所有变量必须写在这里面 // 固定格式：data() { return { 变量 } } // ======================== data() { return { // 页面标题变量 → 用 {{ titleName }} 显示 titleName: "教务管理系统", // 图片地址变量 → 用 :src="imgUrl" 绑定 // 图片放在项目 static 文件夹下 imgUrl: "/static/logo.png", // 控制样式颜色的布尔变量 // true = 红色 // false = 黑色 isRed: true, // 新增msg变量 msg: "这是新增的信息变量", // ==================================== // 今日核心：学生数组 // 多条数据，用于 v-for 循环展示 // ==================================== stuList: [ { name: "张三", grade: "高一", subject: "物理" }, { name: "李四", grade: "高二", subject: "物理" }, { name: "王五", grade: "高三", subject: "物理" }, { name: "赵六", grade: "高一", subject: "数学" }, { name: "孙七", grade: "高二", subject: "数学" } ] }; }, // 页面加载时执行（今天暂时不用） onLoad(options) {}, // 方法区（今天暂时不用） methods: { /** * 方法1：修改页面标题 * this：指向当前vue实例，直接修改data中的titleName变量 */ changeTitle(){ this.titleName="高三物理一轮复习汇总（已修改）" }, /** * 方法2：弹窗提示 * uni.showToast:uni-app原生轻提示API，title为弹窗展示文字 */ showTips(){ uni.showToast({ title:"按钮点击执行成功！",//弹窗显示内容 icon:"none" //icon：none取消默认图标，纯文字提示 }) }, /** * 方法3：取反布尔值，切换字体样式 * !取反运算符：true变false、false变true */ changeColor(){ this.isRed=!this.isRed }, /** * 方法4：修改页面信息内容 */ changeText(){ this.msg="内容已修改！！！" } } }; </script> <!-- ======================== CSS 样式区域：scoped 表示只作用当前页面 ========================= --> <style scoped> /* 页面整体内边距 */ .content { padding: 30rpx; } /* 页面大标题样式 */ .page-title { font-size: 36rpx; /* 字体大小 */ font-weight: bold; /* 加粗 */ color: #333; /* 颜色 */ margin-bottom: 20rpx; /* 底部间距 */ } /* 图片样式 */ .show-img { width: 400rpx; /* 宽度 */ border-radius: 10rpx; /* 圆角 */ } /* 红色文字样式 */ .text-red { color: red; font-size: 30rpx; margin-top: 20rpx; } /* 黑色文字样式 */ .text-normal { color: #333; font-size: 30rpx; margin-top: 20rpx; } /*按钮上下边距，多个按钮分开排版*/ .u-button{ margin-top: 15rpx; } /* ============================== 今日新增 =============================== */ /*列表标题*/ .list-title{ font-size: 32rpx; /*字体大小*/ font-weight: bold; /*粗体显示*/ margin-top: 40rpx; /*上边距*/ margin-bottom: 20rpx; /*下边距*/ } /*学生列表容器*/ .stu-list{ margin-top: 20rpx; /*上边距*/ } /*单个学生卡片样式*/ .stu-item{ padding: 25rpx; /* 内边距 */ background: #f9f9f9; /* 背景颜色 */ border-radius: 10rpx; /* 边框圆角 */ margin-bottom: 15rpx; /* 下边距 */ } </style>

四、分步操作步骤（一步一步照做）

步骤 1

打开pages/index/index.vue

步骤 2

把全部原有代码删除

步骤 3

粘贴上面给的全套带注释代码

步骤 4

保存 → 运行到微信开发者工具

步骤 5

你会看到：

• 标题
• 图片
• 3 个按钮
• 5 条学生列表（今天核心）

最终显示效果如下：

五、今日必须理解的 3 句话

1. 数组放 data 里
2. v-for 循环数组
3. {{item. 字段名}} 显示数据

六、今日打卡验收（勾选）

☐ 能正常显示 5 条学生数据

☐ 每条数据包含：姓名、年级、科目

☐ 控制台无任何报错

☐ 理解v-for、item、index、:key