vue的条件判断是通过v-if、v-else、v-else-if、v-show指令来实现的。
v-if
其中v-if指令根据值（true或false）判断是否执行操作，但是只有为true时才执行v-if的指令，如果没有v-else的话那么久不执行当为false时的操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 这里根据复选框是否选中来决定下面这段文本是否显示 -->
<input type="checkbox" v-model="isChecked" />是否显示
<!-- 如果复选框被选中则isChecked是true则显示文本，如果复选框未被选中则isChecked是false表示下面这段文本不显示 -->
<p v-if="isChecked">如果isChecked是true则显示该段文本，是false则不显示。</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
// 复选框是否选中,初始为选中表示true
isChecked: true
}
})
</script>
</body>
</html>
浏览器展示：
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块。v-else是结合v-if使用，是为了处理当v-if为false时的操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 判断randomNum是否大于0.5，如果大于0.5输出v-if的操作，如果不大于0.5输出v-else，v-else指令没有任何值 -->
<p v-if="randomNum>0.5">{{randomNum}} 大于0.5</p>
<p v-else>{{randomNum}} 不大于0.5</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
// 产生一个随机数
randomNum: Math.random()
}
})
</script>
</body>
</html>
浏览器显示：
v-else-if
用作 v-if 的 else-if 块。可以链式的多次使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="typeName==='石头'">石头</p>
<p v-else-if="typeName==='剪刀'">剪刀</p>
<p v-else-if="typeName==='布'">布</p>
<p v-else>请重来</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
typeName:'石头'
}
})
</script>
</body>
</html>
浏览器展示：
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
使用 v-show 指令来根据条件展示元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-show="typeName='石头'">恭喜你，答对了！</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
typeName: '石头'
}
})
</script>
</body>
</html>
浏览器展示：
