1、v-show
在Vue中，v-show是一个指令，用于根据表达式的值来控制元素的显示与隐藏。当指令的值为true时，元素显示；当指令的值为false时，元素隐藏。
v-show的用法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-show="isshow">欢迎来到{{name}}</h1>
<button @click="changeshow">电子显示隐藏/显示</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:"#root",
data:{
name:'零壹',
isshow:true
},
methods:{
changeshow(){
this.isshow=!this.isshow;
}
}
})
</script>
</body>
</html>
其中，表达式可以是一个计算属性、一个data的属性或者一个方法的返回值。
v-show的特点是，元素仍然存在于DOM中，只是通过修改元素的display属性来控制显示与隐藏。因此，使用v-show隐藏的元素会被渲染到DOM中，只是不可见而已。
与v-show相对的指令是v-if。v-if也用于控制元素的显示与隐藏，但是不同的是，v-if在元素需要隐藏时会将元素从DOM中移除，而不仅仅是隐藏。因此，当元素需要频繁的显示与隐藏时，推荐使用v-show，以提高性能。
2、v-if
文章来源：https://www.toymoban.com/news/detail-812284.html
总结：
文章来源地址https://www.toymoban.com/news/detail-812284.html
到了这里，关于Vue-15、Vue条件渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
