条件语句
1.v-if
当v-if的值为true时,执行或者显示下一块的内容。
例如:通过toggle函数切换show的值。 通过v-if 语句,当show 是true的时候,显示当前元素。
代码:
<style>
/*按钮样式*/
.btn{
width: 160px;
height: 40px;
line-height: 34px;
border-radius: 2px;
font-size: 14px;
font-family: PingFangSC-Regular;
color: rgba(255,255,255,1);
background: rgba(76,132,255,1);
border-radius: 2px;
border: 1px solid rgba(76,132,255,1);
padding: 0px;
}
</style>
<div id="div1">
<button @click="toggle" class="btn" >点击按钮显示/隐藏</button>
<div v-if="show">你看见这句话了。。</div>
</div>
<script>
new Vue({
el:"#div1",
data:{
show:true
},
methods:{
toggle:function(){
this.show=!this.show;
}
}
})
</script>
效果图:
2.v-else
当v-if的值为false时,执行或者显示v-else中的内容。
在上面的代码加上v-else即可。
代码:
<div id="div1">
<button @click="toggle" class="btn" >点击按钮显示/隐藏</button>
<div v-if="show">你看见这句话了。。</div>
<div v-else>我是不是瞎了,看不见啊。。</div>
</div>
3.v-else-if
v-else-if 用法:
代码:
<style>
/*按钮样式*/
.btn{
width: 160px;
height: 40px;
line-height: 34px;
border-radius: 2px;
font-size: 14px;
font-family: PingFangSC-Regular;
color: rgba(255,255,255,1);
background: rgba(76,132,255,1);
border-radius: 2px;
border: 1px solid rgba(76,132,255,1);
padding: 0px;
}
</style>
<div id="div1">
<button @click="toggle" class="btn" >我是谁</button>
<div v-if="number>0.8">再点还是程序猿</div>
<div v-else-if="number>0.6">快乐程序猿</div>
<div v-else-if="number>0.4">修仙程序猿</div>
<div v-else-if="number>0.2">熬夜程序猿</div>
<div v-else>加班程序猿</div>
</div>
<script>
new Vue({
el:"#div1",
data:{
number:0
},
methods:{
toggle:function(){
this.number=Math.random(); //math.random()返回0~1之间的伪随机数
}
}
})
</script>
效果图: