2018-09-11第二节vue.js指令 v-if/v-show、v-bind、display:none与visibility：hidden的区别、添加删除水果列表案例

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

body部分：

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

js部分：

效果图：

v-if.png

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

body部分：

  


   隐藏/显示
   

 

js部分

v-show.png

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

js部分：

效果图：

bind1.jpg

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

  


   
   

       
{{index+1}}
   

 

js部分：

效果图：

bind2.jpg

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

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

两者的区别:

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

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

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

     


    
    添加
    

      

         {{value}}
          删除
      
          
       
    

效果图：

水果列表.png