vue动态显示DOM元素常用 v-if 和 v-show 这两种方式，但这两种是有区别的：
- v-if：当条件为false时，包含v-if指令的元素，根本就不会存在与dom中
- v-show：当条件为false时，v-show只是给元素添加一个行内样 display:none
| 区别 | v-if | v-show |
|---|---|---|
| 实现方式 | 动态地向DOM树内添加或者删除DOM元素 |
设置DOM元素的display样式属性来控制显隐(display="none") |
| 编译过程 | 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) | 控制css进行切换 |
| 编译条件 | 初始值为false就不编译；只有在第一次条件变为真时才开始局部编译 | 在任何条件下（首次条件是否为真）都被编译 |
| 性能消耗 | 不停的销毁和创建（v-if 的初始化较快，但切换代价高） | 只编译一次，保留DOM元素，之后通过控制css来控制显隐 （v-show 初始化慢，但切换成本低，性能更好） |
| 使用场景 | 适合仅切换一次或不频繁切换的场景（应用更广） |
适合频繁切换的场景（不常用） |
eg1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- 当条件为false时，包含v-if指令的元素，根本就不会存在与dom中 -->
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<!-- 当条件为false时，v-show只是给元素添加一个行内样式 display:none -->
<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message :'liy',
isShow :true
}
});
</script>
</html>
eg2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<div>
<span>v-if和v-show都能实现元素的隐藏和显示，但v-if是将元素添加到dom或从dom移除，而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示</span>
</div>
<button v-on:click="showOrHidden">显示隐藏切换</button>
<div v-if="isShow">我有一头小毛驴</div>
<div v-show="isShow">我又有一头小毛驴</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
showOrHidden:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>
拓展：display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:
- display:none ---使该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
- visible:hidden--- 使对象在网页上不可见，即在网页中不占任何的位置。
