一、v-show和v-if:
v-show和v-if都可以控制元素的显示或隐藏,但是v-show是用display控制元素显示隐藏的,而v-if是用visibility控制的;
v-show 例:
<div class="banner">
<p>此内容可见</p>
<p v-show="!see">此内容不可见</p><!--display:none -->
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.banner',
data:{
see:true
}
})
</script>
例2:
点击显示/隐藏:
<div id="header">
<button v-on:click="btn">隐藏/显示</button>
<div class="banner" v-show="see"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#header",
data:{
see:true
},
methods:{
btn:function(){
this.see=!this.see
}
}
})
</script>
v-if 例:
<div class="banner">
<p>此内容可见</p>
<p v-if="!see">此内容不可见</p><!--visibility:hidden -->
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.banner',
data:{
see:true
}
})
</script>
二、v-bind:属性名=“” :绑定属性
例:
<div class="itany">
<img v-bind:src="url" alt="" @click="btn">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
url:'img/1.jpg',
list:'img/2.jpg'
},
methods:{
btn:function(){
this.url=this.list
}
}
})
</script>
练习:点击li切换所对应的图片
<div id="itany">
<img v-bind:src="arr" alt="">
<ul>
<li v-for="(value,index) in url" @click="btn(index)">{{index+1}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
arr:"img/1.jpg",
url:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
},
methods:{
btn:function(ind){
this.arr=this.url[ind]
}
}
})
</script>
display和visibility的区别:
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。
display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。
网友评论