Vue.js入門教程-過濾器

1、過濾器

1.1 概述

（1）過濾器（Filters）提供了一種 執行文本轉換的方法，好比說都轉換成大寫字母或者幾乎作任何咱們想作的事情。

（2）過濾器既能夠在 雙花括號插值 中使用，也能夠在 v-bind 指令的 表達式 中使用。

1.2 注意

（1）Vue 中的過濾器 不能替代 methods、computed 或者 watch，由於過濾器 不改變真正的 data，而只是改變渲染的結果，並返回過濾後的版本。

（2）在不少不一樣的狀況下，過濾器都是有用的，好比儘量保持API響應的乾淨，並在前端處理數據的格式。在你但願避免重複和鏈接的狀況下，他們也能夠有效地封裝成可重用代碼塊背後的全部邏輯。

2、默認過濾器

若是你不是第一次接觸 Vue，你應該知道 Vue 2.0 之前的版本是有內置的過濾器，可是他們從 Vue 2.0 版本中刪除了。

內置的過濾器是有用的，但它們缺少純JavaScript的靈活性。當一個內置函數不適合您的需求時，您最終會從新實現相似功能（在最終代碼中，內置的代碼就成無用代碼，死代碼），或者必須等待Vue更新它們併發布新版本。————Vue的做者

3、定義過濾器

Vue 有兩種不一樣的方式註冊過濾器：①本地過濾器②全局過濾器。你能夠跨全部組件訪問全局過濾器，而本地過濾器只容許你在其定義的組件內部使用。

3.1 本地過濾器

你能夠在一個組件的選項中定義本地的過濾器。

3.2 全局過濾器

在建立Vue 實例以前全局定義過濾器。

3.3 示例

下面這個例子用到了 capitalize 過濾器。

過濾器函數總接收表達式的值 (以前的操做鏈的結果) 做爲第一個參數。在上述例子中，capitalize 過濾器函數將會收到 message 的值做爲第一個參數。

4、過濾器串連

4.1 說明

（1）過濾器可以使用管道（|）符號進行串連，並經過一系列過濾器轉換一個值。

（2）在這個例子中，filterA 被定義爲接收單個參數的過濾器函數，表達式 message 的值將做爲參數傳入到函數中。而後繼續調用一樣被定義爲接收單個參數的過濾器函數 filterB，將 filterA 的結果傳遞到 filterB 中。

（3）過濾器是 JavaScript 函數，所以能夠接收參數。

（4）這裏，filterA 被定義爲接收三個參數的過濾器函數。其中 message 的值做爲第一個參數，普通字符串 'arg1' 做爲第二個參數，表達式 arg2 的值做爲第三個參數。

4.2 示例

（1）英文小寫轉換大寫。

（2）價格只保留兩位小數，而且加上美圓符號。

更多系列文章在GitHub地址

閱讀更多