2018-09-13第三节vue.js用响应式和vue.js做一个表格练习、v-if/v-else/v-else-if、v-once\v-pre、v-html\v-text、v-cloak、过滤器

一、添加用户 表格练习
body部分：

          

               
添加用户
          

         

           用户名
           
       
        

           年龄
           
       
 
        

           邮箱
           
       
       

          
 
          
       
       
    
    
用户列表

       
        

            

                
编号
                
姓名
                
年龄
                
邮箱
                
操作
            
        
        

           

               
{{index+1}}
               
{{value.name}}
               
{{value.age}}
              
{{value.email}}
               

                  删除
                 
            
        
    
    

js部分：

效果图：

添加用户表格练习.png

二、
v-if/v-else/v-else-if：条件渲染

  

    
000000000000
    
1111111111111
    
222222222222
    
3333333333
    
444444444444444
    
55555555555555
    
    

     
   

三、v-once\v-pre
v-once:只绑定一次
v-pre:原样输出

  

      
   
       
{{msg}}
   
        
        
{{msg}}
  

效果：

v-once v-pre.png

四、v-html\v-text

v-html:可以解析标签
v-text:不可以解析标签

   
   
   
{{msg}}
   
   
{{msg}}
 

五、v-cloak生命周期

这个指令保持在元素上直到关联实例结束编译，
和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css部分：

body部分：

 
    

   
{{msg}}

js部分：

六、过滤器
过滤器：对显示在页面上的数据进行处理筛选操作

格式：

   html部分：{{8|过滤器的名字}}

  js部分：Vue.filter('过滤器的名字',function(函数名){


  })

案例：

body部分：

 

     
{{8|addZero}}

js部分：