vue過濾器filter的使用

在 vue2.0 以前，是有內置過濾器的，在2.0中已經沒有內置的過濾器了，但咱們能夠自定義過濾器。

關於 vue 過濾器，在官方文檔中是這樣說明的：

Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方： 雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示。

即過濾器是用來格式化數據的一個函數。過濾器不會修改原始數據，它的做用是過濾數據，就是對數據進行加工處理並返回處理後的數據，好比作一些數據格式上的修改，狀態轉換等。

過濾器分爲兩種

• 組件內的過濾器(組件內有效)
• 全局過濾器(全部組件共享)

定義過濾器

• 第一個參數是過濾器的名字

• 第二個參數是過濾器的功能函數 (若不定義vue就不知道這個字符串是什麼，有什麼做用)。

  過濾器的功能函數

  • 聲明 function(data,argv1,argv2...){}
  • 第一個參數是傳入的要過濾的數據，即調用時管道符左邊的內容。
  • 第二個參數開始日後就是調用過濾器的時候傳入的參數。

過濾器的使用

• 先註冊，後使用
• 組件內 filters:{ 過濾器名: fn } fn 內經過 return 返回最終的數據
• 全局 Vue.filter('過濾器名',fn) fn 內經過 return 返回最終的數據
• 使用 {{ 數據 | 過濾器名 }}

// 使用過濾器時須要添加管道符號（ | ）做爲分隔，管道符 | 右邊是過濾器名稱，即文本的功能函數
​
<!-- 在雙花括號中 -->
{{ message | 過濾器名稱 }}
​
<!-- 在 `v-bind` 中 -->
<div v-bind:id="id | 過濾器名稱"></div>

自定義全局過濾器

Vue.filter('過濾器名稱', function(val) { // val表示要被處理的數據
    // 過濾器業務邏輯，要有返回值
})
​
<div>{{ msg | 過濾器名稱 }}</div>
<div v-bind="msg | 過濾器名稱"></div>

局部過濾器

data () {
    return {
        msg: 'hello world'
    }
},
//定義私用局部過濾器。只能在當前 vue 對象中使用
filters: {
    dataFormat: (msg, a) => { // msg表示要過濾的數據，a表示傳入的參數
        return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // 結果: hello world!

注意：

1. 全局註冊時是 filter 沒有 s ， 而組件過濾器是 filters，是有 s 的，雖然寫的時候沒有 s 也不報錯，可是過濾器是沒有效果的。
2. 當全局過濾器和局部過濾器名字重複的時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用
3. 一個表達式可使用多個過濾器，其執行順序從左往右，前一個過濾器的結果做爲後一個過濾器的被處理數據，因此要注意使用順序

熟悉 vue 的童鞋會知道，過濾器有時候同methods、computed、watch同樣能夠達處處理數據的目的，但又不能替代它們，由於它不能改變原始值。若是一個過濾器的內部特別複雜，能夠考慮把它寫成一個計算屬性，由於計算屬性自己帶有緩存，可複用性強，而過濾器通常用來作一些簡單的操做。

在實際開發中，全局的過濾器要比局部過濾器使用的更普遍一些，說白了咱們爲何要使用過濾器，其實就跟使用函數是同樣，把一些方法封裝，供其它組件使用，這樣調用起來更方便也更快捷。

你們知道全局過濾器是在 main.js 中定義的，但萬一項目過大，有多個過濾器，那 main.js 就一堆代碼，爲了項目模塊化，最好是有專門的目錄來統一存放這些過濾器，而後把處理函數給抽離出去，放在一個.js文件中，下邊經過實例代碼展現。

示例一（局部過濾器）

格式化時間或日期，補全指定位數，不足個位數補0

// filter/index.js文件
export default {
    dateFormat: value => {
        const dt = new Date(value * 1000)
    
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位數，"要補全的符號或值")
        const d = (dt.getDay() + '').padStart(2, '0')
        
        const hh = (dt.getHours() + '').padStart(2, '0')
        const mm = (dt.getMinutes() + '').padStart(2, '0')
        const ss = (dt.getSeconds() + '').padStart(2, '0')
        
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
}
​
// 在 .vue 文件中使用局部過濾器
<script>
    import filters from '../filter'
​
    export default {
        ... ... 
        filters: { ...filters },
        data() {
            return {}
        }
    }
</script>
​
<div> 日期：{{ date | dateFormat }} </div>

示例二（全局過濾器）

通用字典項的回顯：好比性別男女或通用選擇是否，後端傳給咱們的數據是0、1，咱們須要在頁面上顯示男女或是否

// constants/dictionary.js 文件
​
export const GENDER_MENU = [
    { code: 0, label: '男'},
    { code: 1, label: '女'}
];
​
export const COMMON_MENU = [
    { code: 0, label: '否'},
    { code: 1, label: '是'}
];
​
export default {
    GENDER_MENU, COMMON_MENU
}

filter/dict.js 文件

// filter/dict.js 文件
​
import Dict from '../constants/dictionary'
​
export const genderMenu = {
    func: value => {
        const target = Dict.GENDER_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}
​
export const commonMenu = {
    func: value => {
        const target = Dict.COMMON_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}

filter/index.js 文件

// filter/index.js 文件
​
import * as filters from './dict' // 導入過濾函數
​
const Install = Vue => {
    // 導入的 filters 是一個對象，使用Object.keys()方法，獲得一個由key組成的數組，遍歷數據，讓key做爲全局過濾器的名字，後邊的是key對應的處理函數，這樣在任何一個組件中均可以使用全局過濾器了
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key].func)
    })
    /*
    for(const _filter in filters) {
        Vue.filter(`${_filter}`, filters[_filter].func)
    } */
}
​
export default Install

main.js 文件

// main.js 文件
​
... ...
import filters from  './../filter/index'
Vue.use(filters)
... ...

在.vue 文件中使用全局過濾器

// .vue 文件中使用全局過濾器
​
<p>性別：{{ gender | genderMenu }}</p>