前言

我們接著上一篇文章01-04.Vue的使用示例：列表功能 來講。


下一篇文章 02-Vue實例的生命周期函數

過濾器的概念

概念：Vue.js 允許我們自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值表達式、 v-bind表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示。

過濾器的基本使用

比如說，我要將data中msg 后面添加字符串。可以這樣做：

（1）在差值表達式中這樣調用：

        <p>{{ msg | msgFormat }</p>

上方代碼的意思是說：

• 管道符前面的msg：要把 msg 這段文本進行過濾，

• 管道符后面的msgFormat：是通過msgFormat這個過濾器進行來操作。

（2）定義過濾器msgFormat：

// filter是過濾器的對象，里面可以定義多個過濾器
// 定義一個過濾器，名字叫做  msgFormat
filters: {msgFormat: function(msg){return msg + '111111'}
}

上方代碼解釋：

• 過濾器函數function中，第一個參數指的管道符前面的msg。

• return 返回的值可以直接在頁面上顯示

最終，完整版代碼如下：

<template><div id="app">{{ '22222' | msgFormat }}</div>
</template><script>
export default {filters: {msgFormat: function(msg){return msg + '111111'}},data() {return {};},methods: {mySubmit: function () {alert("ok");},},
};
</script>

網頁顯示效果如下：

給過濾器添加多個參數

上面的舉例代碼中，{{ msg | msgFormat }}中，過濾器的調用并沒有加參數，其實它還可以添加多個參數。

接下來，我們在上面的舉例代碼中進行改進。

改進一：過濾器加一個參數。如下：

將 msg 這個字符串進行拼接。代碼如下：

<template><div id="app"><!-- 【重要】通過 過濾器 msgFormat 對 msg 進行過濾。括號里的參數代表 function中的 arg2--><p>{{ msg | msgFormat('xxx') }}</p></div>
</template><script>
export default {filters: {msgFormat: function(msg, arg2){return msg + '111111' + arg2}},data() {return {msg: "聆聽感受思考"};},methods: {mySubmit: function () {alert("ok");},},
};
</script>
<style>
#app{color: black;
}
</style>

注意代碼中那行重要的注釋：括號里的參數代表 function中的 arg2。