🐖：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正，若有侵权，请联系我~~
vue指令—v-if和v-show
一、v-show
表示动态显示或隐藏节点，该指令用来动态控制DOM元素的显示或隐藏。语法如下：
v-show="判断变量"
若判断变量为true,表示显示DOM节点，
若判断变量为false,表示隐藏DOM节点
二、v-if
表示动态创建和删除节点，该指令和v-show的用法相同。
v-if="判断变量"
若判断变量为true,表示创建DOM节点，
若判断变量为false,表示删除DOM节点
三、示例
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue指令之v-if和v-show</title>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick">click</button>
<div v-if="isCreate">动态创建和删除节点</div>
<div v-show = "isShow">动态显示和隐藏节点</div>
</div>
<script type="text/javascript">
//构建vue实例
var vm = new Vue({
el: "#box",
data:{
isCreate: true, //布尔型
isShow: true
},
methods:{ //方法
handleClick(){
this.isCreate = !this.isCreate //取反操作，每次点击按钮，都会进行取反操作
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
运行效果：
分析：
当点击按钮时，触发handleClick事件，isCreate和isShow的值均变为false,此时，两个节点都消失不见了，如下图：
这是为什么呢？因为当第一个节点的判断变量isCreate的值变为false时，该节点进行了删除操作，而第二个节点的判断变量isShow的值变为false时，该节点进行了隐藏。如下图，我们到控制台查看，发现第一个节点被删除了，而第二个节点则是被自动添加了display:none的样式，该dom元素依然存在。如图：
四、v-if和v-show的比较
1） 相同点：
a. v-if和v-show都可以动态控制DOM元素
2）不同点：
a. v-if显示隐藏是将DOM元素整个添加或者删除，而v-show隐藏则是为元素添加css的一个样式display:none,DOM元素依旧存在。
b. v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐。
3）性能消耗：
v-if有更高的切换消耗，v-show有更高的初始渲染消耗
4）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；v-if是惰性的，如果初始条件为假，则什么也不做，只有条件在第一次变为真时才开始局部编译；v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留
5）使用场景：
如果需要非常频繁的切换，使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
