1.v-if / v-show控制元素的顯示隱藏
案例一：
body部分：
<div id="itany">
<p>v-show此內(nèi)容可見</p>
<p v-show=!see>v-show此內(nèi)容不可見</p> <!-- display:none-->
<p>v-if此內(nèi)容可見</p>
<p v-if=!see>v-if此內(nèi)容不可見</p> <!-- visiblity:hidden-->
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
}
})
</script>
效果圖：
v-if.png
案例二烤蜕、點(diǎn)擊隱藏顯示
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>
v-show.png
2.v-bind 綁定屬性 v-bind:屬性='值'，針對(duì)圖片
案例一：
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>
效果圖：
bind1.jpg
案例二點(diǎn)擊切換圖片：
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>
效果圖：
bind2.jpg
二迹冤、display:none與visibility:hidden的區(qū)別
display:none和visibility:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來讽营，
兩者的區(qū)別:
display:none ---對(duì)象在頁(yè)面上徹底消失，不在文檔流中占位泡徙，瀏覽器也不會(huì)解析該元素
visiblility:hidden---視覺上消失橱鹏，在頁(yè)面中所占的空間沒有改變，可以理解為透明度為0的效果堪藐，在文檔流中占位莉兰，瀏覽器會(huì)解析該元素
三、添加刪除水果列表案例
<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>
效果圖：
水果列表.png
