1、過濾器 ①:Vue.js 允許你自定義過濾器,可被用於一些常見的文本格式化。過濾器可以用在兩個地方:插值表達式和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部,由“管道”符號(“|”)指示。使用方式為:{{ msg | form ...
1、過濾器
①:Vue.js 允許你自定義過濾器,可被用於一些常見的文本格式化。過濾器可以用在兩個地方:插值表達式和 v-bind
表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部,由“管道”符號(“|”)指示。使用方式為:{{ msg | formatMsg}},其中msg為要被過濾的文本,formatMsg為過濾器名稱。
②:過濾器的定義方式:
Vue.filter('formatMsg',function(msg){//對data數據進行處理的方法體});
這裡定義了一個名為formatMsg的過濾器,過濾器的第一個參數為過濾器的名稱;第二個參數為過濾方法,方法參數是要被過濾的文本,即管道符號前面的數據。
2、看簡單例子:<body> <div id="app"> <p>{{ msg }}</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ msg:'曾經小小少年,有小小的夢,小小的開始,小小的進步,小小的實現' }, methods:{} }); </script> </body>
這裡只是在頁面簡單的展示了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); });
這裡過濾方法中的第一個參數為需要過濾的文本,後面的參數為過濾器調用時帶的參數。運行結果如下:
每天進步一點點!