Vue总结2-计算属性,函数,过滤器,过渡动画

1.计算属性

• 
  
  
      
      
      
  
  
  
  
  
  
      
  {{name}}
      
  {{age + 1}}
      
  {{msg.split("").reverse().join("")}}
      
      
  {{msg2}}
  
  
  
  
  

2.计算属性与函数的异同

• 
  
  
      
      
      
  
  
  
  
  
  
      
      
  {{msg1()}}
      
  {{msg1()}}
      
  {{msg1()}}
      
      
  {{msg2}}
      
  {{msg2}}
      
  {{msg2}}
  
  
  
  
  

3.过滤器

• 3.1 全局过滤器

• 
  
  
      
      
      
  
  
  
  
  
      
      
  {{name | formartStr1 | formartStr2}}
  
  
  
  
  

• 3.2 局部过滤器

• 
  
  
      
      
      
  
  
  
  
  
  
      
  {{name | formartStr}}
  
  
  
  
  

• 3.3 一个小小的练习

• 
  
  
      
      
      
  
  
  
  
  
      
  {{time | dateFormart("yyyy-MM-dd")}}
  
  
  
  
  

4.过渡动画

• 4.1 通过类名的方式添加

• 
  
  
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
          
  
      
  
  
  
  
  

• 4.2 transition的注意点

• 
  
  
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
          
  
  
      
      
          
  
      
  
  
  
  
  

• 4.3 钩子函数来添加动画

• 
  
  
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
      
          
  
      
  
  
  
  
  

• 4.4 配合第三方库来实现动画

• 
  
  
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
          
  
      
  
  
  
  
  
  

• 4.5 自定义动画的类名

• 
  
  
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
          
  
      
  
  
  
  
  

• 4.6 自定义动画类名结合Animate.css

• 
  
  
      
      
      
      
      
  
  
  
  
  
  
      我是按钮
      
          
  
      
  
  
  
  
  

• 4.7 v-for中的key

• 
  
  
      
      
      
  
  
  
  
  
      
  
          
          
      
      
  
         
  
              
              {{index}} --- {{person.name}}
          
      
  
  
  
  
  

• 4.8 同时给多个元素添加动画 transition-group

• 
  
  
      
      
      
      
  
  
  
  
  
  
      
  
          
          
      
      
  
          
          
  
              
              {{index}} --- {{person.name}}