首先引入vue.js文件
一、v-if
1、定义div标签,当v-if条件为true时,显示那条数据,为false不显示
<div id="div1">
<button v-on:click="toggle">切换隐藏显示</button>
<div v-if="show"> 默认这一条是看得见的</div>
</div>
**2、创建一个vue对象,管理div标签**
var ifCon=new Vue({
el: '#div1',
data: {
show:true
},
methods:{
toggle: function(){
this.show=!this.show;
}
}
})
3、下面为演示结果
二、 v-else
1、定义div标签,当show为true显示中了500万,否则显示谢谢惠顾
<div id="div1">
<button v-on:click="moyiba">买彩票 </button>
<div v-if="show"> 中了500万!</div>
<div v-else>谢谢惠顾!</div>
</div>
**2、创建一个vue对象**
var velse=new Vue({
el: '#div1',
data: {
show:false
},
methods:{
moyiba: function(){
this.show=Math.random()<0.1
}
}
})
点击moyiba事件,产生随机数,当随机数小于0.1,show为true,此处就不演示了
三、v-else-if
1、定义div标签,如下,类似js中switch语句
<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> 流浪汉</div>
</div>
2、创建一个vue对象
var ifelse=new Vue({
el: '#div1',
data: {
number:0
},
methods:{
toutai: function(){
this.number=Math.random()*100
}
}
})