vue过滤器用法实例分析

本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：

过滤器:

vue提供过滤器:

capitalize uppercase currency....

    {{msg|currency ￥}}
  

debounce 配合事件，延迟执行

数据配合使用过滤器:

limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

    

      
      

        {{val}}
      
      

      

      
      

        {{val}}
      
    
  
  

filterBy 过滤数据
filterBy '谁'

    
    

      

        {{val}}
      
    
  
  

orderBy 排序

orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

    
    

      

        {{val}}
      
    
  
  

自定义过滤器: model ->过滤 -> view

Vue.filter(name,function(input){
});

    {{a | toDou 1 2}}
  
  

时间转化器

    {{a | date}}
  
  

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据 -> 视图

model -> view

view -> model

  
  
  
  
  


  

    
    

    {{msg | filterHtml}}
  

希望本文所述对大家vue.js程序设计有所帮助。