本文實(shí)例講述了vue過(guò)濾器用法。分享給大家供大家參考，具體如下：

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、雷山ssl等。為超過(guò)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的雷山網(wǎng)站制作公司

過(guò)濾器:

vue提供過(guò)濾器:

capitalize uppercase currency....

    {{msg|currency ￥}}
  

debounce 配合事件，延遲執(zhí)行

數(shù)據(jù)配合使用過(guò)濾器:

limitBy 限制幾個(gè)
limitBy 參數(shù)(取幾個(gè))
limitBy 取幾個(gè) 從哪開(kāi)始

    

      
      

        {{val}}
      
      

      

      
      

        {{val}}
      
    
  
  

filterBy 過(guò)濾數(shù)據(jù)
filterBy '誰(shuí)'

    
    

      

        {{val}}
      
    
  
  

orderBy 排序

orderBy 誰(shuí) 1/-1
1 -> 正序
2 -> 倒序

    
    

      

        {{val}}
      
    
  
  

自定義過(guò)濾器: model ->過(guò)濾 -> view

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

    {{a | toDou 1 2}}
  
  

時(shí)間轉(zhuǎn)化器

    {{a | date}}
  
  

過(guò)濾html標(biāo)記

雙向過(guò)濾器:*

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

數(shù)據(jù) -> 視圖

model -> view

view -> model

  
  
  
  
  


  

    
    

    {{msg | filterHtml}}
  

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。