|
|
|
|
步骤 2 : v-else 步骤 3 : v-else-if
通过toggle函数切换show的值。 通过v-if 语句，当show 是true的时候，显示当前元素
<div v-if="show"> 默认这一条是看得见的</div> <script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="toggle">切换隐藏显示</button>
<div v-if="show"> 默认这一条是看得见的</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
show:true
},
methods:{
toggle: function(){
this.show=!this.show;
}
}
})
</script>
v-else 用法，如代码所示，没什么好说的。。。
<script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="moyiba"> 摸一把彩票 10%的几率，建议一边点击一边心里默数，多少次了,站长表示最多点了40次才中奖，妈蛋~ </button>
<div v-if="show"> 中了500万！</div>
<div v-else>谢谢惠顾！</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
show:false
},
methods:{
moyiba: function(){
this.show=Math.random()<0.1
}
}
})
</script>
v-else-if 用法
<script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<button v-on:click="toutai"> 看看下辈子投胎是做什么的 </button>
<div v-if="number>98"> 神仙</div>
<div v-else-if="number>95"> 国家领导人</div>
<div v-else-if="number>90"> 大富商</div>
<div v-else-if="number>80"> 大企业主</div>
<div v-else-if="number>70"> 演艺明星</div>
<div v-else-if="number>60"> 小企业主</div>
<div v-else-if="number>50"> 普通公务员</div>
<div v-else-if="number>40"> 小个体户</div>
<div v-else-if="number>30"> 血汗工厂工人</div>
<div v-else-if="number>20"> 偏远山区农民</div>
<div v-else> 流浪汉</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
number:0
},
methods:{
toutai: function(){
this.number=Math.random()*100
}
}
})
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-03-15
将v-on替换成@:使用时无反应
2021-07-04
可以利用 v-cloak 解决闪屏的问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-01-15
下辈子有什么用，何不来看看这辈子最高能做什么
2020-12-16
this关键字
2020-12-07
哇，点一下就中奖了，何解
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 22 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
