Vue學習之路第十七篇：過濾器的使用
阿新 • • 發佈：2019-02-04
ext eight 每天 分享圖片 頁面 ace mat img bin
1、過濾器
①：Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：插值表達式和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號（“|”）指示。使用方式為：{{ msg | formatMsg}}，其中msg為要被過濾的文本，formatMsg為過濾器名稱。
②：過濾器的定義方式：
Vue.filter(‘formatMsg‘,function(msg){//對data數據進行處理的方法體});
這裏定義了一個名為formatMsg的過濾器，過濾器的第一個參數為過濾器的名稱；第二個參數為過濾方法，方法參數是要被過濾的文本，即管道符號前面的數據。
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:‘曾經小小少年，有小小的夢，小小的開始，小小的進步，小小的實現‘
},
methods:{}
});
這裏只是在頁面簡單的展示了msg定義的數據。現在我們要使用過濾器把msg裏文本為“小小”的字符串替換為“大大”。
<div id="app">
<p>{{ msg | formatMsg }}</p>
</div>
頁面上調用名字為formatMsg的過濾器
//定義過濾器 Vue.filter(‘formatMsg‘,function(msg){ return msg.replace(/小小/g,‘大大‘); });
這裏定義了名稱為formatMsg的過濾器，過濾器中調用replace方法把“小小”替換為“大大”。運行結果如下：
3、過濾器還可以添加任意多個參數
<div id="app">
<p>{{ msg | formatMsg(‘超級‘,‘大大‘) }}</p>
</div>
這裏過濾器有兩個參數，那麽在定義過濾器時，應該在相對應的過濾方法中展示對應的參數：
Vue.filter(‘formatMsg‘,function(msg,arg1,arg2){ return msg.replace(/小小/g,arg1 + arg2); });
這裏過濾方法中的第一個參數為需要過濾的文本，後面的參數為過濾器調用時帶的參數。運行結果如下：
每天進步一點點！
Vue學習之路第十七篇：過濾器的使用