Vue 提供了自定义过滤器（filters）方法，可以对文本按需格式化。
可以用在 双花括号插值和 v-bind 表达式，其中 v-bind 从 2.1.0+ 开始支持。
使用方法如下，在 JavaScript 表达式尾部，用 | 隔开：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>
定义一个过滤器：
可以在 .vue 页面中直接定义：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
也可以在创建 Vue 实例前，全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
*注： 当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器支持串联：
{{ message | filterA | filterB }}
该实例中，filterA 将 message 格式化后将结果传给 filterB 再进行转换。
过滤器是 JavaScript 函数，因此还可以接收参数：
{{ message | filterA('arg1', arg2) }}
filterA 作为过滤器分别接收 message 、 arg1 、 arg2 三个参数。
封装一个过滤器：
@/plugins/filters.js
export const filterA = (arg1, arg2) => {
...
}
在页面中使用：
page.vue
<template>
<div>{{ message | filterA(arg1, arg2) }}</div>
</template>
<script>
import { filterA } from '@/plugins/filters'
export default {
filters: {
filterA,
},
data() {
return {
message: 'www.w3h5.com',
}
},
}
</script>
批量全局使用：
/main.js
import * as Filters from '@/plugins/filters'
// 放在在 Vue 实例之前
Object.keys(Filters).forEach(key => {
Vue.filter(key, Filters[key]);
})
然后就可以在页面中直接使用了：
<template>
<div>{{ message | filterA(arg1, arg2) }}</div>
</template>
常用过滤器实例：
filters.js
/*
* Vue Filters
* @see https://cn.vuejs.org/v2/guide/filters.html
*/
/**
* 字符串重复
* @param {String|Number} value
* @param {Number} count
*/
export const repeat = (value, count) => value.toString().repeat(count)
/**
* 字符串替换
* @param {String|Number} value
* @param {String} string
* @param {String} replacement
*/
export const replace = (value, string, replacement) => value.toString().replace(new RegExp(string, 'g'), replacement)
/**
* 手机号隐私保护
* 13866668888 -> 138****8888
* @param {String|Number} value
*/
export const secretPhone = (value) => value.toString().replace(/(/d{3})(/d{4})(/d{4})/, '$1****$3')
/**
* 格式化手机号
* 13866668888 -> "138-6666-8888"
* @param {*} value
*/
export const formatPhone = (value) => value.toString().replace(/(^/d{3}|/d{4}/B)/g, '$1-')
/**
* 字母大小写转换
* type: 1-首字母大写 2-首页母小写 3-全部大写 4-全部小写 5-大小写转换
* @param {String} value
* @param {Number} type
*/
export const changeCase = (value, type) => {
// 大小写转换
const toggleCase = (value) => {
let newValue = ''
value.split('').forEach((item) => {
if (/^([a-z]+)/.test(item)) {
newValue += item.toUpperCase()
} else if (/^([A-Z]+)/.test(item)) {
newValue += item.toLowerCase()
} else {
newValue += item
}
})
return newValue
}
switch (type) {
case 1:
return value.charAt(0).toUpperCase() + value.slice(1)
case 2:
return value.charAt(0).toLowerCase() + value.slice(1)
case 3:
return value.toUpperCase()
case 4:
return value.toLowerCase()
case 5:
return toggleCase(value)
default:
return value
}
}
/**
* 去除空格
* type: 1-前后空格 2-前空格 3-后空格 4-所有空格
* @param {String} value
* @param {Number} type
*/
export const trim = (value, type) => {
switch (type) {
case 1:
return value.replace(/(^/s*)|(/s*$)/g, '')
case 2:
return value.replace(/(^/s*)/g, '')
case 3:
return value.replace(/(/s*$)/g, '')
case 4:
return value.replace(//s+/g, '')
default:
return value
}
}
/**
* 日期时间格式化
* {{ Date() | formatDate }} -> 2020-09-28 15:54:52
* {{ '2020/10/01 12:30:45' | formatDate('yyyy-MM-dd hh:mm:ss w') }} -> 2020-10-01 12:30:45 星期四
* @param {Date} value 可以被 new Date(value) 解析的时间格式，如 Date()、2020/10/01、2020-10-01 12:00 等
* @param {String} fmt 格式化模版
*/
export const formatDate = (value, fmt = 'yyyy-MM-dd hh:mm:ss') => {
const date = new Date(value)
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'w+': date.getDay(), // 星期
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds(), // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (k === 'w+') {
if (o[k] === 0) {
fmt = fmt.replace('w', '星期日')
} else if (o[k] === 1) {
fmt = fmt.replace('w', '星期一')
} else if (o[k] === 2) {
fmt = fmt.replace('w', '星期二')
} else if (o[k] === 3) {
fmt = fmt.replace('w', '星期三')
} else if (o[k] === 4) {
fmt = fmt.replace('w', '星期四')
} else if (o[k] === 5) {
fmt = fmt.replace('w', '星期五')
} else if (o[k] === 6) {
fmt = fmt.replace('w', '星期六')
}
} else if (new RegExp(`(${k})`).test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length),
)
}
}
return fmt
}
/**
* 文件大小显示转换
* 12 -> 12.0 B
* 98223445 -> 93.7 MB
* 9822344566 -> 9.15 GB
* @param {String|Number} bytes
*/
export const bytesToSize = (bytes) => {
bytes = bytes.toString()
if (bytes == 0) return '0 B'
const k = 1024
const i = Math.floor(Math.log(bytes) / Math.log(k))
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}
/**
* 千分位格式化
* 1234567 -> 1,234,567
* @param {String|Number} value
*/
export const thousands = (value, fractionDigits = 0) => {
const regexp = //d{1,3}(?=(/d{3})+(/./d*)?$)/g
return (Number(value).toFixed(fractionDigits) + '').replace(regexp, '$&,')
}
/**
* 现金数字转大写
* 1234.567 -> 壹仟贰佰叁拾肆元伍角陆分柒厘
* @param {String|Number} value
*/
export const upDigit = (value) => {
const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
const fraction = ['角', '分', '厘']
const unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟'],
]
let s = ''
let head = value < 0 ? '欠' : ''
value = Math.abs(value)
for (let i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(value * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
}
s = s || '整'
value = Math.floor(value)
for (let i = 0; i < unit[0].length && value > 0; i++) {
let p = ''
for (let j = 0; j < unit[1].length && value > 0; j++) {
p = digit[value % 10] + unit[1][j] + p
value = Math.floor(value / 10)
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
}
return (
head +
s
.replace(/(零.)*零元/, '元')
.replace(/(零.)+/g, '零')
.replace(/^整$/, '零元整')
)
}
参考文献：
未经允许不得转载：w3h5 » Vue 过滤器（filters）的使用、封装、批量全局定义及常用实例分享
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/150534.html