第 4 课2026.09.03
根据完成状态切换练习提示。
第 4 课：v-if与v-else条件渲染
- 日期：2026-09-03
- 课程序号：第 4 课
- 知识点：响应式条件与分支节点
用途
根据完成状态切换练习提示。
核心概念
- v-if 决定是否创建该分支的元素；v-else 必须紧接对应的 v-if 或 v-else-if。
- 条件切换会销毁并重建分支；它不只是把元素变透明。
最小代码或操作示例
html
<!-- 沿用上一课启用模板编译器的入口 -->
<div id="app">
<button @click="finished = !finished">切换状态</button>
<p v-if="finished">练习已完成</p>
<p v-else>请先完成练习</p>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data: () => ({ finished: false })
}).mount("#app");
</script>3～5 分钟练习
点击两次按钮，写出初始、第一次点击、第二次点击分别显示什么。
参考答案
text
初始“请先完成练习”；第一次“练习已完成”；第二次恢复“请先完成练习”。任一时刻只显示一个 p 分支。与上一课的联系
上一课用 @click 修改响应式数据；本课用同一数据控制哪部分模板存在。
参考资料
- 官方文档：v-if与v-else条件渲染（2026-09-03 核对；以文档标注版本及本机界面为准）。