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

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

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

// 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(指定位數(shù)，"要補(bǔ)全的符號或值")
        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}-$wppm3vysvbp ${hh}:${mm}:${ss}`
    }
}
​
// 在 .vue 文件中使用局部過濾器
<script>
    import filters from '../filter'
​
    export default {
        ... ... 
        filters: { ...filters },
        data() {
            return {}
        }
    }
</script>
​
<div> 日期：{{ date | dateFormat }} </div>

// 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 文件
​
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 文件
​
import * as filters from './dict' // 導(dǎo)入過濾函數(shù)
​
const Install = Vue => {
    // 導(dǎo)入的 filters 是一個對象，使用Object.keys()方法，得到一個由key組成的數(shù)組，遍歷數(shù)據(jù)，讓key作為全局過濾器的名字，后邊的是key對應(yīng)的處理函數(shù)，這樣在任何一個組件中都可以使用全局過濾器了
    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 文件
​
... ...
import filters from  './../filter/index'
Vue.use(filters)
... ...

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