v-bind用于切换图片，v-show,v-if用与隐藏

1.v-if / v-show控制元素的显示隐藏
案例一：

body部分：

   
v-show此内容可见
   
v-show此内容不可见
   
   
v-if此内容可见
   
v-if此内容不可见
      

js部分：

效果图：

image

案例二、点击隐藏显示
css部分：

body部分：

  


   隐藏/显示
   

 

js部分

image

2.v-bind 绑定属性 v-bind:属性='值'，针对图片
案例一：
body部分：

js部分：

效果图：

QQ图片20180911165047.png

案例二点击切换图片：
body部分：

  


   
   

       
{{index+1}}
   

 

js部分：

效果图：

QQ图片20180911170019.jpg

二、display:none与visibility:hidden的区别

display:none和visibility:hidden都能把网页上某个元素隐藏起来，

两者的区别:

display:none ---对象在页面上彻底消失，不在文档流中占位，浏览器也不会解析该元素

visiblility:hidden---视觉上消失，在页面中所占的空间没有改变，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素

三、添加删除水果列表案例

     


    
    添加
    

      

         {{value}}
          删除
      

    

效果图：

QQ图片20180911170138.png