1.v-if / v-show控制元素的显示隐藏
案例一：
body部分：
<div id="itany">
<p>v-show此内容可见</p>
<p v-show=!see>v-show此内容不可见</p> <!-- display:none-->
<p>v-if此内容可见</p>
<p v-if=!see>v-if此内容不可见</p> <!-- visiblity:hidden-->
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
}
})
</script>
效果图：
image
案例二、点击隐藏显示
css部分：
<style>
p{
width:100px;
height:100px;
background:red;
}
</style>
body部分：
<div id="itany">
<button v-on:click='alt'>隐藏/显示</button>
<p v-show=see></p>
</div>
js部分
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
alt:function(){
this.see=!this.see
}
}
})
</script>
image
2.v-bind 绑定属性 v-bind:属性='值'，针对图片
案例一：
body部分：
<div id="itany">
<img v-bind:src="url" alt="" @click='alt'>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
hef:'img/2.jpg',
al:'img/3.jpg'
},
methods:{
alt:function(){
this.url=this.hef
this.hef=this.al
this.al=this.url
}
}
})
</script>
效果图：
QQ图片20180911165047.png
案例二点击切换图片：
body部分：
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for='(value,index) in arr' @click='chg(index)'>{{index+1}}</li>
</ul>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']
},
methods:{
chg:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
效果图：
QQ图片20180911170019.jpg
二、display:none与visibility:hidden的区别
display:none和visibility:hidden都能把网页上某个元素隐藏起来，
两者的区别:
display:none ---对象在页面上彻底消失，不在文档流中占位，浏览器也不会解析该元素
visiblility:hidden---视觉上消失，在页面中所占的空间没有改变，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素
三、添加删除水果列表案例
<div id="itany">
<input type="text" v-model='arrs'>
<button v-on:click='alt'>添加</button>
<ul>
<li v-for='(value,index) in arr'>
{{value}}
<button v-on:click='add(index)'>删除</button>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['苹果','香蕉','橘子','鸭梨'],
arrs:''
},
methods:{
alt:function(){
this.arr.push(this.arrs),
this.arrs=''
},
add:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
效果图：
QQ图片20180911170138.png
网友评论