v-model

一.v-model的解释：

双向数据绑定，常用于表单元素例如input元素

例子：

   
 
  
       
    
  
  
     
 
           
         
{{msg}}
 
     
 
      
     
     
      

屏幕显示：

Document_01.gif

二.v-on的解释：

绑定一个事件 格式：v-on：事件名=‘函数名’

例子：

    
    


    

        按钮
    
    
    

屏幕效果：当点击按钮时，会出现弹出框111

三.简单的效果：

1.点击切换：

    
    


   

      
{{msg}}
      按钮
   
    
    

2.点击来回切换：

    
    


     

       
{{msg}}
       按钮
   
    
    

3.添加列表：

    
    


   

         添加
       

           

              {{value}}
              删除
           
       
   
    
    

四.v-bind的解释：

绑定属性的 格式：v-bind:属性名=‘值’

例子：

屏幕显示：

1t_01.gif

两张图片切换效果：

显示出来的效果：

会先出现：

2_01.gif

然后会出现：

3_01.gif

多张图片相互切换：

    
    
    


    

        
        

            
{{index+1}}
        
    
    
    

屏幕效果：当点击相应数字时会出现相应的图片

五.

1v-show:控制元素的显示和隐藏，使用的是display：none隐藏，会把元素部分删除，控制台里面的会存在

例子：

    
    
    


    

        现实与隐藏
        

    
    
    

2.v-if 同样可以控制元素的显示和隐藏，使用的是visibility:hidden,会把元素全部删除，控制台里面也不存在

    
    
    


    

        现实与隐藏
        

    
    
    

visibility:hidden与display：none的区别：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

六.v-if , v-else, v-else-if条件语句：

例子：

    
    


   

       
00000000000
       
1111111111
       
22222222
       
555555555555
      
   
    
    

随机数公式：:Math.floor(Math.random()*(max-min+1)+min)