如何在vue中使用過濾器filter

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

我們先看上面的官方解釋，也可以簡單理解為過濾器是對即將顯示的資料做進一步的篩選處理，然後進行顯示，值得注意的是過濾器並沒有改變原來的資料，只是在原資料的基礎上產生新的資料。

過濾器分為兩種：

區域性過濾器：只允許在當前元件中使用

全域性過濾器：所有元件都可以使用

區域性過濾器

定義也很簡單，先來說下元件內的過濾器。

export default {
    data () {
        return {
            msg: 'hello world'
        }
    },
    //定義區域性過濾器。只能在當前 vue 物件中使用
    filters: {
        dataFormat: (msg, a) => { // msg表示要過濾的資料，a表示傳入的引數
            return msg + a;
        }
    }
}

元件使用方法

<p>{{ msg | dataFormat('!')}}</p> 

這裡面有幾個注意的點

當全域性過濾器和區域性過濾器重名時，會採用區域性過濾器，即：區域性過濾器優先於全域性過濾器被呼叫

一個表示式可以使用多個過濾器，其執行順序從左往右，前一個過濾器的結果作為後一個過濾器的被處理資料，所以要注意使用順序

全域性過濾器

全域性過濾器我們使用Vue腳手架搭建的專案作為演示

一般我們會把一些通用的方法封裝到一個js檔案，這裡我們也一樣，有個utils.js檔案，匯出兩個方法

export const dataFormat = (val) => {

    // 裡面是邏輯，這裡簡單返回

    return val + "!"
}
export const dataFormat1 = (val) => {

    // 裡面是邏輯，這裡簡單返回

    return val + "!!!"

}

在 main.js檔案中引用（假設utils.js檔案和main.js檔案同目錄）

// 過濾器

import * as filters from './utils'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

在專案任意元件使用

<!-- 在雙花括號中 -->
<p>{{ msg | dataFormat}}</p> 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="msg | dataFormat"></div>

全域性的過濾器要比區域性過濾器使用的更廣泛一些，說白了我們為什麼要使用過濾器，其實就跟使用函式是一樣，我們想把一些方法封裝，供其它元件使用，這樣呼叫起來方便，開發更快捷。

本文來源: