2018-09-14 vue 三

一、v-bind

    主要用于绑定属性，可简写为：属性名='值'。
 例一     （图片切换）：
   

        
    
    
    

例二、（选项卡）
      

        
        

            
{{index+1}}
        

    
    
    

二、v-show （ display:none）， v-if （visibility:hidden）; 都用于 控制元素的显示与隐藏

   例一：
           

        
{{msg}}
        
{{msg}}
    
    
    

   例二 、
           

        点击显示隐藏
        

    
    
    

     注： display:none与visibility:hidden的区别：   
               1.
                  display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是
                  视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
                2.
                  使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产
                  生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此
                  时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不
                  会引起回流。
                 3.
                   display:none隐藏后不占据额外空间，它会产生回流和重绘，而 visibility:hidden和opacity:0
                  元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面
                   重绘。

三、v-if、v-else 、v-else-if的区别

       

        
0000
        
111
        
2222
        
333
        
44
        
5555