2.3 分支语句
Vue中的分支语句v-if非常好理解，逻辑跟Java中的if-else相同。v-if语句块包含以下内容：
1.v-if
2.v-else
3.v-else-if
接下来以一个简单例子即可理解：
代码语言：javascript复制<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-if="flag">
今天天气很舒服！
</p>
<p v-else-if="rich">
今天天气很燥热！晚上要去放松一下！
</p>
<p v-else="rich">
晚上只能自嗨！
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
flag:false,
rich:false
},
methods:{
}
});
</script>
</html>v-if和v-show之间有着看似相同的效果，但优化上却有区别。先看下面这个例子：
代码语言：javascript复制<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p v-show="rich">
有钱！
</p>
<p v-if="rich">
有钱！
</p>
<button type="button" @click="rich=!rich">今晚彩票开奖</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
flag:false,
rich:false
},
methods:{
}
});
</script>
</html>通过点击“今晚彩票开奖”按钮，能切换rich的值，此时发现，v-if和v-show的显示状态都会来回切换。看起来是一样的，但通过查看控制台代码发现，v-show实际会将p标签的css样式的display属性设为none来达到隐藏的效果。
而v-if是直接在页面上添加和删除p标签来达到效果，因此v-show在反复切换的应用场景下，效率比v-if更高。
