条件判断
1. v-if
1.1 v-if 和 v-else
条件判断使用 v-if 指令：
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
大于5
</div>
<div v-else>
小于5
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
注意：v-if 可以配合v-else使用，也可以单独使用 。当配合v-else使用时，加有v-else的标签要紧跟加有v-if的标签之后，中间如果穿插其他标签，v-else将永远不会显示出来，并会报错！
如果v-if后面跟的是布尔值，而非变量语句的时候，可以根据布尔值真假判断显示和不显示 ，舍弃v-else 用v-if="flag" 配合 v-if="!flag"来解决中间不可以穿插其他标签的问题，可见v-if 配合v-else使用非常有局限性！
1.2 v-if 和 v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
判断 type 变量的值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
</body>
</html>
输出C，同上v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
2. v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-show 控制元素的显示和隐藏 -->
<h1 v-show="flag">hello</h1>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
flag:true,
}
})
</script>
</html>
v-if和v-show的区别：
v-if底层控制的是节点的添加和删除，v-if一旦为假，带有v-if 的标签将不复存在，而v-show底层控制的是标签样式的显示和隐藏，并不会删除标签节点！
网友评论