uniApp打卡学习第05天：v-if / v-show 条件渲染、元素显示与隐藏

页面pages/index/index.vue学习内容v-if/v-show条件渲染、元素显示与隐藏学习时长2 小时40min 知识点 70min 编码 10min 问题整理前置说明基于 Day4 代码迭代保留历史所有功能新增列表显隐控制逻辑一、核心知识点笔记摘抄存档v-if 条件渲染指令语法v-if布尔表达式原理表达式结果为true时创建并渲染 DOM 节点为false时直接移除 DOM 节点。适用场景元素切换频率低、初始化渲染要求高的场景。特点切换开销大初始渲染开销小。v-show 条件渲染指令语法v-show布尔表达式原理无论真假DOM 节点始终存在为false时仅通过 CSSdisplay: none隐藏元素。适用场景元素需要频繁切换显示 / 隐藏的场景。特点初始渲染开销大切换开销小。布尔变量控制定义布尔类型变量如isShow通过按钮点击对变量做逻辑取反!变量名实现一键切换状态。兼容历史知识点插值表达式、v-bind、click、v-for列表循环、methods方法全部沿用。二、分步实操步骤打开 HBuilderX 项目edu_demo进入pages/index/index.vue清空原有代码粘贴下方完整带注释代码Ctrl S保存文件项目自动编译运行到微信开发者工具测试所有按钮功能重点验证开关列表按钮可正常控制学生列表显隐区分v-if和v-show效果。三、完整代码 逐行超详细注释!-- 页面结构区域写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 !--今日新增控制列表显隐的按钮-- u-button clicktoggleList typeinfo开关学生列表/u-button !-- v-if用法根据isShow布尔值决定是否渲染整个列表DOM 为true渲染节点为false彻底删除节点 -- view v-ifisShow view classlist-title学生信息列表/view view classstu-list !-- v-for 循环渲染学生数据保留key属性-- view v-for(item,index) in stuList :keyindex classstu-item text姓名{{item.name}}/text text | 年级{{item.grade}}/text text | 科目{{item.subject}}/text /view /view /view !-- v-show 用法仅通过CSS控制显示隐藏DOM节点始终存在 用于对比 v-if 和v-show的区别 -- view v-showisShow classshow-desc 【测试区域】本段文字使用v-show控制显隐 /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: 这是新增的信息变量, // // 今日新增控制元素显隐的核心布尔变量 // true 显示false 隐藏 // isShow: true, // // 今日核心学生数组 // 多条数据用于 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内容已修改 }, /** * 今日新增方法切换列表显示/隐藏状态 * 逻辑取反运算符true false 来回切换 */ toggleList(){ this.isShow !this.isShow } } }; /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; /* 下边距 */ font-size: 28rpx; /* 字体大小 */ } /* v-show 测试文本样式 */ .show-desc{ margin-top: 20rpx; font-size: 28rpx; color: #666; padding: 15rpx; background: #f0f7ff; border-radius: 8rpx; } /style四、功能验收打卡逐项勾选☐ 原有所有功能正常修改标题、弹窗提示、切换字体颜色☐ 点击【开关学生列表】按钮学生列表整体显示 / 隐藏切换正常☐ 点击按钮时v-if控制的列表完全消失DOM 节点被移除☐ 点击按钮时v-show控制的测试文字同步隐藏DOM 节点保留☐ 微信开发者工具控制台无报错、无警告☐ 能分清v-if和v-show的原理、区别与适用场景五、知识点区分重点笔记必记表格指令核心原理切换性能推荐使用场景v-if动态创建 / 销毁 DOM 节点切换慢初始化快元素很少切换、权限判断v-showCSS 控制显隐DOM 始终存在切换快初始化慢元素频繁显示 / 隐藏六、拓展练习选做巩固理解把学生列表外层的v-if改为v-show反复点击按钮观察页面加载变化新增一个布尔变量单独控制某一条学生数据的显隐结合三元表达式搭配v-if做多条件判断渲染。