今天我们要说的是vue中的条件渲染，在vue中我们可以通过条件判断去控制某些内容的显示和隐藏。
条件渲染指令v-if
我们新建一个demo11.html文件，复制一下hello world代码。然后来编写4个div，用来模拟一个问答题，在最上面用p标签来写一段话，”谁是世界上最漂亮的人？“。然后在div 中列出选项
A 、张三 B、李四 C、如花 D、别人
<div id="app" >
<p>谁是世界上最美丽的人？</p>
<div v-if="result=='A'">A、张三</div>
<div v-if="result=='B'">B、李四</div>
<div v-if="result=='C'">C、如花</div>
<div v-if="result=='D'">D、别人</div>
</div>然后用浏览器打开，页面大概就这个样子。
回到代码，然后我们在data中把message变量删除掉， 声明一个result来存储答案，默认我们给它赋值一个”A“。现在我想只显示result对应的答案选项，我们可以在选项div中使用v-if指令，给它添加一个条件，条件成立时才会显示这个选项，当result==A时显示张三，然后再给其他几个选项也添加上if判断，当result等于B时显示李四，等于C时显示如花，等于D时显示非人类。
<body>
<div id="app" >
<p>问：谁是世界上最美丽的人？</p>
<div v-if="result=='A'">A、张三</div>
<div v-if="result=='B'">B、李四</div>
<div v-if="result=='C'">C、如花</div>
<div v-if="result=='D'">D、非人类</div>
</div>
</body>
<script>
const App = Vue.createApp({
data() {
return {
result:'A'
}
},
})
const vm = App.mount("#app")
</script>我们保存一下，来到浏览器点击一下刷新，这时候页面上就只显示了张三这条选项。
我们再来把result改成"B" ，然后保存，刷新浏览器页面上就只显示了李四这条选项了。
vue中v-if和js中的if条件判断语句是一样的，同样的也支持else 和 else if ，在vue中我们写成v-else和v-else-if。
回到代码中，我们就可以把其他判断写成v-else-if。
如果这四个选项都不是的话，我们再来添加一个div表示超出答题范围。这个我们就可以用v-else来让它显示了。
我在把result 修改成”E“，刷新浏览器,”E“不存在所以就会显示超出答题范围。
最后我们在浏览器来看一下，在浏览器中没有显示的选项，我们发现不显示的选贤是连dom都不存在的，而不是简单的显示和隐藏。只有对应条件成立了才会渲染出dom。相反条件成立时会直接删除掉这个dom。