项目edu_demo页面pages/index/index.vue今日核心学会循环显示学生列表教务系统最常用难度★★☆☆☆代码逐行注释 可直接复制运行一、今日核心知识点笔记必须背v-for作用循环遍历数组批量渲染页面列表语法v-for(item, index) in 数组名 :keyindexitem代表数组里的每一条数据比如每一个学生对象index代表数组下标从 0 开始的编号:keyindex必须写Vue 用来优化渲染不写会报错 / 页面错乱学生数据格式数组里放对象stuList: [ { name: 张三, grade: 高一, subject: 物理 }, { name: 李四, grade: 高二, subject: 物理 }, { name: 王五, grade: 高三, subject: 物理 }, { name: 赵六, grade: 高一, subject: 数学 }, { name: 孙七, grade: 高二, subject: 数学 } ]二、今日学习页面页面pages/index/index.vue三、完整代码 逐行终极注释!-- 页面结构区域写HTML、显示内容 -- template !-- 根容器所有内容必须放在一个 view 里面 -- !-- classcontent 用于设置页面整体内边距 -- view classcontent !-- 1. 插值表达式 {{ }} 渲染文字 把 data 里的 titleName 显示在页面上 -- view classpage-title{{ titleName }}/view view classpage-title{{ msg }}/view !-- 2. v-bind 简写 :src 动态绑定图片地址 图片路径来自 data 里的 imgUrl modewidthFix 表示宽度固定高度自动等比缩放 -- image :srcimgUrl classshow-img modewidthFix/image !-- 3. v-bind 简写 :class 动态绑定样式 isRed 为 true → 用 red 类红色字体 isRed 为 false → 用 normal 类黑色字体 语法三元表达式 → 条件 ? 真值 : 假值 -- view :classisRed ? text-red : text-normal 动态样式文字我会根据变量变色 /view !--按钮1click绑定changeTitle方法点击修改页面标题-- u-button clickchangeTitle typeprimary点击修改标题/u-button !--按钮2click绑定showTips方法点击弹出系统提示框-- u-button clickshowTips typesuccess点击弹窗提示/u-button !--按钮3click绑定changeColor方法点击切换字体颜色-- u-button clickchangeColor typewarning切换字体颜色/u-button !--按钮4click绑定changeText方法点击切换文字内容-- u-button clickchangeText typewarning修改msg文字内容/u-button !-- 今日核心:v-for 循环渲染学生列表 1. stuList是data里的学生数组 2. item代表每一条学生数据 3. index是下标从O开始 4. :keyindex必须写不然会报错格式错乱 -- view classlist-title学生列表/view view classstu-list !--循环开始-- view classstu-item v-for(item, index) in stuList :keyindex !--显示学生姓名-- 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: 教务管理系统, // 图片地址变量 → 用 :srcimgUrl 绑定 // 图片放在项目 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原生轻提示APItitle为弹窗展示文字 */ showTips(){ uni.showToast({ title:按钮点击执行成功,//弹窗显示内容 icon:none //iconnone取消默认图标纯文字提示 }) }, /** * 方法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 句话数组放 data 里v-for 循环数组{{item. 字段名}} 显示数据六、今日打卡验收勾选☐ 能正常显示 5 条学生数据☐ 每条数据包含姓名、年级、科目☐ 控制台无任何报错☐ 理解v-for、item、index、:key
uniApp打卡学习第04天：v-for 列表循环渲染 + key 属性 + 学生数据列表
项目edu_demo页面pages/index/index.vue今日核心学会循环显示学生列表教务系统最常用难度★★☆☆☆代码逐行注释 可直接复制运行一、今日核心知识点笔记必须背v-for作用循环遍历数组批量渲染页面列表语法v-for(item, index) in 数组名 :keyindexitem代表数组里的每一条数据比如每一个学生对象index代表数组下标从 0 开始的编号:keyindex必须写Vue 用来优化渲染不写会报错 / 页面错乱学生数据格式数组里放对象stuList: [ { name: 张三, grade: 高一, subject: 物理 }, { name: 李四, grade: 高二, subject: 物理 }, { name: 王五, grade: 高三, subject: 物理 }, { name: 赵六, grade: 高一, subject: 数学 }, { name: 孙七, grade: 高二, subject: 数学 } ]二、今日学习页面页面pages/index/index.vue三、完整代码 逐行终极注释!-- 页面结构区域写HTML、显示内容 -- template !-- 根容器所有内容必须放在一个 view 里面 -- !-- classcontent 用于设置页面整体内边距 -- view classcontent !-- 1. 插值表达式 {{ }} 渲染文字 把 data 里的 titleName 显示在页面上 -- view classpage-title{{ titleName }}/view view classpage-title{{ msg }}/view !-- 2. v-bind 简写 :src 动态绑定图片地址 图片路径来自 data 里的 imgUrl modewidthFix 表示宽度固定高度自动等比缩放 -- image :srcimgUrl classshow-img modewidthFix/image !-- 3. v-bind 简写 :class 动态绑定样式 isRed 为 true → 用 red 类红色字体 isRed 为 false → 用 normal 类黑色字体 语法三元表达式 → 条件 ? 真值 : 假值 -- view :classisRed ? text-red : text-normal 动态样式文字我会根据变量变色 /view !--按钮1click绑定changeTitle方法点击修改页面标题-- u-button clickchangeTitle typeprimary点击修改标题/u-button !--按钮2click绑定showTips方法点击弹出系统提示框-- u-button clickshowTips typesuccess点击弹窗提示/u-button !--按钮3click绑定changeColor方法点击切换字体颜色-- u-button clickchangeColor typewarning切换字体颜色/u-button !--按钮4click绑定changeText方法点击切换文字内容-- u-button clickchangeText typewarning修改msg文字内容/u-button !-- 今日核心:v-for 循环渲染学生列表 1. stuList是data里的学生数组 2. item代表每一条学生数据 3. index是下标从O开始 4. :keyindex必须写不然会报错格式错乱 -- view classlist-title学生列表/view view classstu-list !--循环开始-- view classstu-item v-for(item, index) in stuList :keyindex !--显示学生姓名-- 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: 教务管理系统, // 图片地址变量 → 用 :srcimgUrl 绑定 // 图片放在项目 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原生轻提示APItitle为弹窗展示文字 */ showTips(){ uni.showToast({ title:按钮点击执行成功,//弹窗显示内容 icon:none //iconnone取消默认图标纯文字提示 }) }, /** * 方法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 句话数组放 data 里v-for 循环数组{{item. 字段名}} 显示数据六、今日打卡验收勾选☐ 能正常显示 5 条学生数据☐ 每条数据包含姓名、年级、科目☐ 控制台无任何报错☐ 理解v-for、item、index、:key
