根據(jù)Vue 官方給出的解釋阀溶，過濾器是可被用于一些常見的文本格式化的東西。過濾器可以在兩個(gè)地方被使用玄括，一個(gè)是在雙花括號的插值表達(dá)式中和v-bind 表達(dá)式中（后者從2.1.0+開始支持）
- 過濾器不會改變原數(shù)據(jù)冯丙，而是生成了新的數(shù)據(jù)
// 在雙花括號中使用 capitalize 為過濾器的名字 message 為需要過濾的文本
{{ message | capitalize }}
// 在 v-bind 中使用
<div v-bind:id="rawId | formatId"></div>
過濾器的定義分：
- 全局定義過濾器
- 本地定義過濾器
// 全局注冊 ，在創(chuàng)建Vue 實(shí)例之前全局定義過濾器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
// 創(chuàng)建 Vue 實(shí)例之前定義過濾器
new Vue({
// ...
})
// 在一個(gè)組件中定義本地的過濾器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
- 過濾器支持串聯(lián)使用 如下：
{{ message | filterA | filterB }}
message 經(jīng)過 過濾器 filterA 處理完的結(jié)果遭京，會再被傳入 過濾器 filterB 中進(jìn)行處理
- 過濾器是JavaScript函數(shù)胃惜，可以接收多個(gè)參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里，filterA 被定義為接收三個(gè)參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個(gè)參數(shù)，普通字符串 'arg1' 作為第二個(gè)參數(shù)鲸睛，表達(dá)式 arg2 的值作為第三個(gè)參數(shù)翩剪。
時(shí)間過濾器
// 全局定義時(shí)間過濾器 返回值格式： 2020-02-08 13：12：15
Vue.filter('dateFormat', function( originVal ) {
const dt =new Date(originVal)
const y = dt.getFullYear()
const m = ( dt.getMonth() +1 + '' ).padStart(2,0)
const d = ( dt.getDate() + '' ).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}-$gq8gw8g ${hh}:${mm}:${ss}`
})
