一、知识点
当只有两个或两个以下的条件判断时我们可以用:
- 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>