vue 之 过滤器 filter

过滤器(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)
    }
}