1.v-if / v-show控制元素的顯示隱藏
案例一：
body部分：
v-show此內(nèi)容可見(jiàn)
v-show此內(nèi)容不可見(jiàn)
v-if此內(nèi)容可見(jiàn)
v-if此內(nèi)容不可見(jiàn)
js部分：
newVue({? ? ? ? el:'#itany',? ? ? ? data:{? ? ? ? ? ? see:true}? ? })
效果圖：
image
案例二匠童、點(diǎn)擊隱藏顯示
css部分：
p{width:100px;height:100px;background:red;? ? }
body部分：
隱藏/顯示
js部分
newVue({? ? ? ? el:'#itany',? ? ? ? data:{? ? ? ? ? ? see:true},? ? ? ? methods:{? ? ? ? ? ? alt:function(){this.see=!this.see? ? ? ? ? ? }? ? ? ? }? ? })
image
2.v-bind 綁定屬性 v-bind:屬性='值'叮喳，針對(duì)圖片
案例一：
body部分：
js部分：
newVue({? ? ? ? el:'#itany',? ? ? ? data:{? ? ? ? ? ? url:'img/1.jpg',? ? ? ? ? ? hef:'img/2.jpg',? ? ? ? ? ? al:'img/3.jpg'},? ? ? ? methods:{? ? ? ? ? ? alt:function(){this.url=this.hefthis.hef=this.althis.al=this.url? ? ? ? ? ? }? ? ? ? }? ? })
效果圖：
QQ圖片20180911165047.png
案例二點(diǎn)擊切換圖片：
body部分：
- {{index+1}}
js部分：
newVue({? ? ? ? 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]? ? ? ? ? ? }? ? ? ? }? ? })
效果圖：
QQ圖片20180911170019.jpg
二、display:none與visibility:hidden的區(qū)別
display:none和visibility:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)歼指，
兩者的區(qū)別:
display:none ---對(duì)象在頁(yè)面上徹底消失咖摹，不在文檔流中占位评姨，瀏覽器也不會(huì)解析該元素
visiblility:hidden---視覺(jué)上消失，在頁(yè)面中所占的空間沒(méi)有改變萤晴，可以理解為透明度為0的效果吐句，在文檔流中占位，瀏覽器會(huì)解析該元素
三店读、添加刪除水果列表案例
添加
{{value}}刪除
newVue({? ? ? ? el:'#itany',? ? ? ? data:{? ? ? ? ? ? arr:['蘋(píng)果','香蕉','橘子','鴨梨'],? ? ? ? ? ? arrs:''},? ? ? ? methods:{? ? ? ? ? ? alt:function(){this.arr.push(this.arrs),this.arrs=''},? ? ? ? ? ? add:function(ind){this.arr.splice(ind,1)? ? ? ? ? ? }? ? ? ? }? ? })
效果圖：
