vue过滤器的使用

vue 对数据提供一个  filter 的处理器，虽然命名为  filter  ，但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下  输出前段需要的格式数据。

基本用法：

处理时间的例子

<div class="time">{{rating.rateTime | formatDate}}</div>

filters: {
formatDate (time) {
let date = new Date(time)
return format(date, 'yyyy-MM-dd hh:mm')
}
}

export function format (date, fmt) {
if (/(y+)/.test(fmt)) {
// RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDay(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}

function padLeftZero (str) {
return ('00' + str).substr(str.length)
}

<div class="time">{{message | filterFun }}</div>

再一个{{message}}模板中，可以添加多个filter对message进行处理     | 表示filter

在filter可以传多个参数，但是filters的function的默认第一个参数为当前message的值，所以函数的时候自定义参数是从第二位开始传的