场景:
需要将日期格式进行过滤,不管什么格式的日期(时间戳、标准时间等)都过滤成(年-月-日)的格式。
使用条件:
- 必须以 {{}} 这种形式绑定的数据才能使用过滤器。
如:
<p>时间为:{{nowDate | parseFormate('{y}-{m}-{d}')}}</p>
其中:
paseFormate是过滤器的名字。
- 原生html,而非vue中的v-bind的值绑定,如:
<input :value="name | toEnglish"></input>
重点:
过滤器的第一个参数默认是你需要过滤的值(也就是|号前面的值),但是在函数中并没有体现出来,但确实是存在的,这点大家需要注意。
看下过滤器,大家就可以看出来了,第一个参数就是我们需要过滤的值。
// filters也是vue生命周期中的一个钩子函数
filters: {
parseFormate(time, cFormat) {
return parseTime(time, cFormat)
}
}
其中,
parseTime是我们自定义的转换时间的方法,大家不用去关注。
参数time,就是上面html中的nowDate。
参数cFormate,就是'{y}-{m}-{d}'。
全局注册filter
场景:对于我们开发中,有时候会需要一些通用的过滤器,比如对日期过滤,对金额过滤等等,如果我们每次都需要在组件中进行引入,则太麻烦了,这时候就需要全局注册。
语法:Vue.filter(过滤器名称,方法)
// myFilters.js 定义过滤器的文件
// 分转元的过滤器
let fen2yuan = value => {
if (!value) {
return '0.00'
}
return (parseFloat(value) / 100).toFixed(2)
}
// 格式化日期的过滤器
let formatDate = value => {
...
return 格式化之后的日期
}
export { fen2yuan, formatDate }
// index.js 入口文件
import Vue from 'vue'
import * as myFilters from './myFilters'
Object.keys(myFilters).forEach(key=> {
Vue.filter(key, myFilters[key])
})
网友评论