vue学习笔记4：条件渲染
一、知识点
当只有两个或两个以下的条件判断时我们可以用：
- v-if
- v-else
<div v-if="which==1">which==1输出我</div>
<div v-else>否则输出我</div>
当有两个以上的条件判断时，我们可以用：
v-if 和 v-else只能有一个，其他皆为 v-else-if
- v-if
- v-else-if
- v-else
<div v-if="which==1">which=1输出我</div>
<div v-else-if="which==2">which=2输出我</div>
<div v-else-if="which==3">which=2输出我</div>
<div v-else-if="which==4">which=4输出我</div>
<div v-else>否则输出我</div>
二、兑奖案例
现在我们去买饮料的时候，很多饮料的瓶盖上都会有一个二维码，我们扫一下那个二维码可以知道我们有没有中奖
假设瓶盖上的不是二维码，而一段兑奖码，我们去官网中输入兑奖码获取中奖信息
输入兑奖码后，点击兑奖，就会获取文本框中的内容，并通过条件渲染输出信息
兑奖要求如下：
- 洗衣机兑奖码：123
- 电饭煲兑奖码：456
- 保温杯兑奖码：789
- 其他均不中奖
运行结果：
三、相关代码
<body>
<div id="div1">
<input id="inputarea" type="text" placeholder="请输入兑奖码" />
<button @click="handclick()">兑奖</button>
<div v-show="isAcive"><!-- 中奖提示，初始值为false，不显示 -->
<div v-if="which==123">恭喜你中奖了，你抽中的是洗衣机</div><!-- 输入兑奖码后，显示对应的中奖信息 -->
<div v-else-if="which==456">恭喜你中奖了，你抽中的是电饭煲</div>
<div v-else-if="which==789">恭喜你中奖了，你抽中的是保温杯</div>
<div v-else>很遗憾，你什么都没抽中</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
isAcive:false,
which:0
},
methods:{
handclick(){
this.isAcive=true;//显示兑奖信息（初始值为不显示）
a=document.getElementById("inputarea").value; //获取输入框的值（字符串类型）
this.which=parseInt(a);//把获取的值转化为整数
}
}
})
</script>
</body>
