萌框架vue（四）——過濾器
阿新 • • 發佈：2018-12-18
作用：一些常見的文字格式化
用途：
① 用插值表示式之中
② 用在 v-bind 之中
分類：
① 全域性過濾器
② 區域性過濾器
1、全域性過濾器
全域性過濾器：
1）建立一個過濾器物件（一定在放在 vue 例項之前）
Vue.filter(filterName, function(value){})
filterName: 定義過濾器的名稱
function(el) {} : 將來過濾器要執行的邏輯
value: 使用過濾器的資料
2）實現過濾器的邏輯，這個邏輯一定要有返回值
3）使用過濾器： '管道’符號
<body> <div id="app"> {{ msg | reverseStr }} </div> </body> <script src="./vue.js"></script> <script> // 建立一個過濾器物件 Vue.filter('reverseStr', function(value) { return value.split('').reverse().join(''); }); var vm = new Vue({ el: '#app', data: { msg: 'message' }, }); </script>
2、區域性過濾器
定義在 vue 例項之中
通過 filters 屬性中的鍵值對來建立的
① 在 vue 例項中新增一個屬性 filters
② 在 filters 屬性中新增一個過濾器（佈局過濾器）
鍵值對： 鍵：過濾器的名字 值：過濾器的邏輯函式
③ 在過濾器的邏輯函式中完成邏輯程式碼
④ 使用過濾器
<div id="app"> {{ msg | reverseStr }} </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: 'message' }, methods: { }, filters: { 'reverseStr': function(value){ return value.split('').reverse().join(''); } } }); </script>
3、區別
① 全域性過濾器：
定義在 vue 例項之前
通過 Vue.filter 來建立的
在任意 vue 例項中使用
② 區域性過濾器：
定義在 vue 例項之中
通過 filters 屬性中的鍵值對來建立的
只能在當前 vue 例項中使用
4、傳參和串聯
傳參：
定義時的第一個引數永遠是使用這個過濾器的資料
定義時的第二個引數是：呼叫時的第一個引數
定義時的第三個引數是：呼叫時的第二個引數
串聯：
多個過濾器可以串聯在一起使用
<div id="app"> <!-- 過濾器的傳參 --> <!-- {{ msg | addXYZ("ABC", "XYZ") }} --> <!-- 過濾器的串聯 --> {{ msg | addABC | addXYZ }} </div> <script src="./vue.js"></script> <script> // 過濾器的傳參 // Vue.filter('addXYZ', function(value, paramA, paramB) { // return value + paramA + paramB; // }) // 過濾器的串聯： Vue.filter('addABC', function(value) { return value + "ABC"; }) Vue.filter('addXYZ', function(value) { return value + "XYZ"; }); var vm = new Vue({ el: '#app', data: { msg: 'message' }, }); </script>