1.v-if / v-show控制元素的显示隐藏
案例一：
body部分：
v-show此内容可见
v-show此内容不可见
v-if此内容可见
v-if此内容不可见
js部分：
newVue({ el:'#itany', data:{ see:true} })
效果图：
image
案例二、点击隐藏显示
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:属性='值'，针对图片
案例一：
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
案例二点击切换图片：
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的区别
display:none和visibility:hidden都能把网页上某个元素隐藏起来，
两者的区别:
display:none ---对象在页面上彻底消失，不在文档流中占位，浏览器也不会解析该元素
visiblility:hidden---视觉上消失，在页面中所占的空间没有改变，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素
三、添加删除水果列表案例
添加
{{value}}删除
newVue({ el:'#itany', data:{ arr:['苹果','香蕉','橘子','鸭梨'], arrs:''}, methods:{ alt:function(){this.arr.push(this.arrs),this.arrs=''}, add:function(ind){this.arr.splice(ind,1) } } })
效果图：
