过滤器(filter)
1.概念
- vue 中的过滤器(filter) :数据格式化
- 也就是说,让数据按照我们规定的一种格式输出
- 比如 : 对于日期来说,将日期格式转化为`年-月-日 小时:分:秒` 格式的过程
// 直接显示
<h1>{{ data }}</h1>
显示 : 2019-06-05T16:43:23.490Z
不是我们想要的
我们想要 :2019-06-05 16:43:23
2. 全局过滤器和局部过滤器
- 说明 : 通过全局方式创建的过滤器,在任何一个Vue实例中都可以使用(一般情况下,为了项目方便管理,都是一个vue实例)
- 注意点 : 使用全局过滤器的时候,应该创建全局过滤器,再创建Vue实例
- 局部创建的过滤器 只能在当前vue实例中使用
3. 怎么注册全局过滤器
// 第一个参数 : 过滤器的名字
// 第二个参数 : 是一个回调函数,只要使用过滤器的时候,这个回调函数就会执行
// 通过回调函数的返回值得到格式化后的数据
Vue.filter('data',res=>{
return '哈哈'
})
4. 使用过滤器 示例
// 组件
<h1>时间戳-格式 {{ date2 | date }}</h1>
//js
Vue.filter('date',res => {
return `${res.getFullYear()}-${res.getMonth()}-${res.getDate()} ${res.getHours()}:${res.getMinutes()}:${res.getSeconds()}`
})
5. moment 插件
- 使用 : 1 . 安装 : npm i moment 2. 引入 : 3 . 使用 :
- 日期 => 指定格式 `moment(res).format('YYYY-MM-DD HH-mm-ss') `
- 时间戳 => 指定格式 `moment(res).format('YYYY-MM-DD HH-mm-ss') `
-
// 全局 Vue.filter('date',res=>{ return moment(res),format('YYYY-MM-DD HH-mm-ss') })
6. 参数问题
- 示例
<h1>时间戳-格式 {{ date2 | date('YYYY-MM-DD HH-mm-ss',888) }}</h1>
// 默认值
Vue.filter('date', (res, format = 'YYYY-MM-DD', arg) => {
console.log(arg)
return moment(res).format(format)
})
7. 局部过滤器
在vm的配置项里写一个 filters
对应的是一个对象
filter:{
date(res,format='YYYY-MM-DD',arg ){
return moment(res).format(format)
}
}