扣丁學堂HTML5培訓之vue過濾器用法實例分析

今天扣丁學堂HTML5培訓老師給大家分享一篇關於vue過濾器用法實例分析詳解，結合實例形式總結分析了vue.js常見過濾器相關使用技巧與操作注意事項，下面我們一起來看一下吧。

HTML5培訓

過濾器:

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

 
 <title>
 
 
 


 

 
 

 {{msg | filterHtml}}
 

以上就是關於扣丁學堂HTML5培訓之vue過濾器用法實例分析的詳細介紹，希望對大家的學習有所幫助，想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師為您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。

H5進階課程：https://ke.qq.com/course/387348?flowToken=1008605【掃碼進入前端H5架構師進階VIP體驗課】

H5基礎課程：https://ke.qq.com/course/320523?flowToken=1008606【掃碼進入HTML5前端開發VIP免費公開課】

閱讀更多 扣丁學堂 的文章

關鍵字: HTML5 扣丁 虛擬機