过滤器

过滤器

　　

1. 概念 :

• vue 中的过滤器(filter) : 数据格式化 ,

• 也就是说,让数据按照我们规定的一种格式输出

• 比如 : 对于日期来说,将日期格式化转化为 年-月-日 小时:分:秒 格式的过程

• 使用：1.先注册；2.再使用|（管道）   格式: 需要处理的数据 | 过滤器

 // 直接显示
 <h1>{{ date  }}</h1>
 显示 :   2019-01-11T10:11:19.566Z
 不是我们想要的
 我们想要的 : 2019-01-11 18-11-53

2. 全局过滤器 和 局部过滤器

• 说明 : 通过全局方式创建的过滤器，在任何一个 Vue 实例中都可以使用 (一般情况下,为了项目方便管理,都是一个 vue 实例)

• 注意点: 使用全局过滤器的时候，应该先创建全局过滤器，再创建 Vue 实例

• 局部创建的过滤器 只能在当前 vue 实例中使用

3. 怎么注册 全局过滤器

// 第一个参数 : 过滤器的名字
// 第二个参数 : 是一个回调函数,只要使用过滤器的时候,这个回调函数就会执行
///           通过回调函数的返回值得到格式化后的数据
Vue.filter('date', 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 插件

• 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 对应的是一个对象

   filters: {
   date(res, format = 'YYYY-MM-DD', arg) {
   return moment(res).format(format)
   }
   }