v-show
- 作用：根据真假切换元素的显示状态；
- 原理：修改元素的display，实现隐藏；
- 指令后面的内容最终都会解析为布尔值；
- 值为true元素显示，值为false元素隐藏；
- 数据改变之后，对应元素的显示状态会同步更新。
v-if
- 作用：根据表达式的真假切换元素的显示状态；
- 本质是通过操作dom元素来切换显示状态；
- 表达式的值为true，元素存在于dom树中，若为false，从dom树中移除；
v-show与v-if的使用选择
v-show切换时消耗小，所以频繁的切换使用v-show，反之使用v-if。
实例说明
为了便于大家更好的理解，下面通过一个例子来进一步说明。
HTML实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>v-show 与 v-if的区别</title>
</head>
<body>
<div id="app">
<input type="button" value="v-show切换显示状态" @click="isShow_show">
<input type="button" value="v-if切换显示状态" @click="isShowIf_if">
<h1 v-show="isShow">v-show切换显示状态使用的时display</h1>
<h2 v-if="isShowIf">v-if切换显示状态操作的时dom</h2>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
isShow:true,
isShowIf:true
},
methods:{
isShow_show:function(){
this.isShow=!this.isShow
},
isShowIf_if:function(){
this.isShowIf=!this.isShowIf
}
}
})
</script>
</html>
效果图
说明： 默认情况下，isShow 和 isShowIf 都为true，所以h1 h2都显示。当分别切换他们的显示状态时，通过控制台可知，v-show是通过对h1标签设置display：none实现隐藏的，而v-if则直接在dom树中将h2标签移除。
