vue常用指令代码实例总结

vue常用内置指令

 
 
 
  [v-cloak] { display: none }
 




 
{{content}}
 
  
 
 
 
abcd
 提示

  
  
  
  


  
    
    百度一下
    
    
    
{{name}}
    
    
    
    
    按钮
    
    
{{arr[1]}}
    
    
{{users[1].name}}
  
  

计算属性和监视

 
 




 姓: 

 名: 

 
 姓名1(单向): 

 姓名2(单向): 

 姓名3(双向): 

 
{{fullName1}}
 
{{fullName1}}

列表渲染

  
  
  
  


  
    

      

 {{item}}
      
    
    

      

 {{index}} --- {{item}}
      
    
    

      {{user.name}} --- {{user.age}}
    
    add按钮
    del按钮
  
  

class & style 绑定

 
 
 
  .classA {
   color: red;
  }
  .classB {
   background: blue;
  }
  .classC {
   font-size: 20px;
  }
 




 1. class绑定: :class='xxx'
 
xxx是字符串
 
xxx是对象
 
xxx是数组
 2. style绑定
 
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
 更新

条件渲染

 
 




 
表白成功
 
表白失败
 

 
求婚成功
 
求婚失败
 切换

事件处理

 
 




 1. 绑定监听
 test1
 test2
 test3
 2. 事件修饰符
 
 百度一下
 
  
  
 
 3. 按键修饰符
 
 
 

表单数据绑定

生命周期

 
 




 destory vue
 
尚硅谷IT教育

过渡，动画

 
 
 
  
  .xxx-enter-active, .xxx-leave-active {
   transition: opacity 1s
  }
  
  .xxx-enter, .xxx-leave-to {
   opacity: 0;
  }
  .move-enter-active {
   transition: all 1s
  }
  .move-leave-active {
   transition: all 3s
  }
  .move-enter, .move-leave-to {
   opacity: 0;
   transform: translateX(20px)
  }
 




 Toggle
 
  
hello
 



 Toggle2
 
  
hello
 

过滤器

 
 





 显示格式化的日期时间
 
{{time}}
 
最完整的: {{time | dateString}}
 
年月日: {{time | dateString('YYYY-MM-DD')}}

本文主要介绍了vue常用指令代码实例，更多关于vue常用指令请查看下面的相关链接