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

页面：pages/index/index.vue

学习内容：v-if/v-show条件渲染、元素显示与隐藏

学习时长：2 小时（40min 知识点 + 70min 编码 + 10min 问题整理）

前置说明：基于 Day4 代码迭代，保留历史所有功能，新增列表显隐控制逻辑

一、核心知识点笔记（摘抄存档）

1. v-if 条件渲染指令

   • 语法：v-if="布尔表达式"
   • 原理：表达式结果为true时，创建并渲染 DOM 节点；为false时，直接移除 DOM 节点。
   • 适用场景：元素切换频率低、初始化渲染要求高的场景。
   • 特点：切换开销大，初始渲染开销小。

2. v-show 条件渲染指令

   • 语法：v-show="布尔表达式"
   • 原理：无论真假，DOM 节点始终存在；为false时，仅通过 CSSdisplay: none隐藏元素。
   • 适用场景：元素需要频繁切换显示 / 隐藏的场景。
   • 特点：初始渲染开销大，切换开销小。

3. 布尔变量控制定义布尔类型变量（如isShow），通过按钮点击对变量做逻辑取反（!变量名），实现一键切换状态。

4. 兼容历史知识点：插值表达式、v-bind、@click、v-for列表循环、methods方法全部沿用。

二、分步实操步骤

1. 打开 HBuilderX 项目edu_demo，进入pages/index/index.vue；
2. 清空原有代码，粘贴下方完整带注释代码；
3. Ctrl + S保存文件，项目自动编译；
4. 运行到微信开发者工具，测试所有按钮功能；
5. 重点验证：开关列表按钮可正常控制学生列表显隐，区分v-if和v-show效果。

三、完整代码 + 逐行超详细注释

<!-- ======================== 页面结构区域：写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> <!--今日新增：控制列表显隐的按钮--> <u-button @click="toggleList" type="info">开关学生列表</u-button> <!-- ============================== v-if用法：根据isShow布尔值决定是否渲染整个列表DOM 为true：渲染节点；为false：彻底删除节点 ===================================--> <view v-if="isShow"> <view class="list-title">学生信息列表</view> <view class="stu-list"> <!-- v-for 循环渲染学生数据，保留key属性--> <view v-for="(item,index) in stuList" :key="index" class="stu-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-show="isShow" class="show-desc"> 【测试区域】本段文字使用v-show控制显隐 </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: "这是新增的信息变量", // =================================== // 今日新增：控制元素显隐的核心布尔变量 // 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原生轻提示API，title为弹窗展示文字 */ showTips(){ uni.showToast({ title:"按钮点击执行成功！",//弹窗显示内容 icon:"none" //icon：none取消默认图标，纯文字提示 }) }, /** * 方法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的原理、区别与适用场景

五、知识点区分（重点笔记，必记）

表格

六、拓展练习（选做，巩固理解）

1. 把学生列表外层的v-if改为v-show，反复点击按钮，观察页面加载变化；
2. 新增一个布尔变量，单独控制某一条学生数据的显隐；
3. 结合三元表达式，搭配v-if做多条件判断渲染。