Vue中的条件渲染
1.通过 v-if 指令，决定标签是否在页面展示或存在（当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级）
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的条件渲染</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <div v-if="show">{{message}}</div> < > var vm = new Vue({ el:'#app', data:{ show:false, message:"Hello World" }, }) </ > </body></html>输出：当为 true 时，显示数据；
当为 false 时，不显示数据；
2.v-show
v-if 和 v-show :二者在刚开始运行时均取决于 show 变量，开始均为 false ，故二者均不展示；但区别在于，v-show 的页面实际是存在的，只是设置成了 display:none;
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的条件渲染</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <div v-if="show" data-test="v-if">{{message}}</div> <div v-show="show" data-test="v-show">{{message}}</div> < > var vm = new Vue({ el:'#app', data:{ show:false, message:"Hello World" }, }) </ > </body></html>输出：show = true 时；
show = false 时，v-if 不存在DOM中，但 v-show 存在，只是设置成了 display:none;频繁的显示与隐藏中性能更高。
3.v-else
v-if 和 v-else 必须紧跟在一起使用，之间不能有其他程序
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的条件渲染</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <div v-if="show" >{{message}}</div> <div v-else=>Bye World</div> < > var vm = new Vue({ el:'#app', data:{ show:false, message:"Hello World" }, }) </ > </body></html>输出：show = false 时
show = true 时
4.v-else-if
v-if 、v-else-if 和 v-else必须紧跟在一起使用，之间不能有其他程序
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的条件渲染</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <div v-if="show ==='a'" >This is A</div> <div v-else-if="show ==='b'" >This is B</div> <div v-else=>This is others</div> < > var vm = new Vue({ el:'#app', data:{ show:false, message:"Hello World" }, }) </ > </body></html>输出：开始默认是 a
输出改为 b
输出改为 c(和 a、b都不相同)
5.key 值
当给某个元素添加 key值 时，就会是唯一的元素，若二者 key 值不一样则不会尝试复用以前的标签；
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的条件渲染</ > < src = "./vue.js"></ ></head><body> <div id ='app'> <div v-if="show"> 用户名：<input key="username"/> </div> <div v-else> 邮箱名：<input key="email"/> </div> < > var vm = new Vue({ el:'#app', data:{ show:false, }, }) </ > </body></html>输出：
show = true 时；文本框中的内容被清空
补充：若不设置 key 值，则会复用已经存在的 input 标签
输入改为 true
继续阅读与本文标签相同的文章
-
Java 学习（28）---(线程的控制 / 生命周期 /解决安全问题）
2026-05-26栏目： 教程
-
SQL--( 初识 MyBatis)
2026-05-26栏目： 教程
-
SQL--(MyBatis 实战）
2026-05-26栏目： 教程
-
初识 Vue（28）---（Vue 中的动画封装）
2026-05-26栏目： 教程
-
初识 Vue（27）---（Vue 中的列表过渡）
2026-05-26栏目： 教程