v-show：通过切换元素的display CSS属性实现显示隐藏；
v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建；
<div id="one">
<h1 v-show="false">欢迎来到perfect*博客园 A</h1>
<h1 v-if="false">欢迎来到perfect*博客园 B</h1> </div>
我们可以通过定义一个属性进行控制显示与隐藏：
定义的属性：
<script>
window .onload= () =>{
new Vue({
el:"#one",
data:{
flag:true
},
methods:{
}
});
}
</script>
html:
<div id="one">
<button @click="flag=!flag">click</button>
<h1 v-show="flag">欢迎来到perfect*博客园 A</h1>
<h1 v-if="flag">欢迎来到perfect*博客园 B</h1> </div>
v-else与v-elseif：都是与v-if配对使用；
vue中定义属性：
num：0
HTML中加入：
<button @click="num=1">--1--</button>
<button @click="num=2">--2--</button>
<button @click="num=-1">-- -1 --</button> <h2 v-if="num===1">篮球</h2>
<h2 v-else-if="num===2">羽毛球</h2>
<h2 v-else>其它</h2>
最终所有示例的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-show和v-if的使用</title>
<script src="../js/vue.js"></script> <script> window .onload= () =>{
new Vue({
el:"#one",
data:{
flag:true,
num:0 },
methods:{ } });
}
</script>
</head>
<body>
<div id="one">
<button @click="flag=!flag">click</button>
<h1 v-show="flag">欢迎来到perfect*博客园 A</h1>
<h1 v-if="flag">欢迎来到perfect*博客园 B</h1> <button @click="num=1">--1--</button>
<button @click="num=2">--2--</button>
<button @click="num=-1">-- -1 --</button> <h2 v-if="num===1">篮球</h2>
<h2 v-else-if="num===2">羽毛球</h2>
<h2 v-else>其它</h2> </div>
</body>
</html>
使用v-if、v-show、v-else-if、v-else代码