今天学习了v-bind,v-show,v-if,v-else,v-else-if
v-bind
v-bind是绑定属性。
v-bind 用法：v-bind:属性名=‘值’'。简写： ：属性名=‘值’。
实例
点击切换图片
<body>
<div id='itany'>
<img v-bind:src="url" alt="" v-on:click='chg'>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
url:'images/1.png'
},
methods:{
chg:function(){
this.url='images/2.png'
}
}
})
</script>
</body>
点击来回切换图片
<body>
<div id='itany'>
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'./images/1.png',
list:['./images/1.png','./images/2.png','./images/3.jpg']
},
methods:{
chg:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>
v-show
v-show是控制元素显示和隐藏
v-show用法：在下方数据定义一个值等于true或false,
v-show=‘值’，true等于显示，false等于隐藏
实例
<body>
<div id='itany'>
<h1>{{msg}}</h1>
<h3 v-show='!see'>{{msg}}</h3>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
msg:'hello vue',
see:true
}
})
</script>
</body>
点击隐藏显示
<body>
<div id="itany">
<button v-on:click="hide()">点击隐藏</button>
<div style="width: 100px;height:100px;background: #f00;" v-show="seen"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
seen:true
},
methods:{
hide:function(){
this.seen=!this.seen;
}
}
})
</script>
</body>
v-if,v-else,v-else-if
v-if是控制元素显示和隐藏
v-if和v-show的区别是：v-if是将dom元素整个添加或删除，而v-show则将该元素添加css样式display:none，dom元素还在。
v-else是控制元素显示和隐藏
v-else必须要和v-if匹配使用，v-else不能单独使用。
只有v-if的值为false时，v-else模块才会显示出来。
实例
<body>
<div id="example">
<p v-if="greeting">Directive1</p>
<p v-else="greeting">Directive2</p>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
nel: '#example',
data: {
greeting: false
}
});
</script>
</body>
v-else-if是控制元素显示和隐藏
多条数据判断
实例
<body>
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else-if='num==3'>33333333</p>
<p v-else-if='num==4'>444444444</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
</body>
new Vue({
el:'#itany',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
网友评论