Vue 学习笔记 --- 过滤器

过滤器

1. 概念 :

• vue 中的过滤器(filter) : 数据格式化 ,
• 也就是说,让数据按照我们规定的一种格式输出
• 比如 : 对于日期来说,将日期格式化转化为 年-月-日 小时:分:秒 格式的过程

 // 直接显示
 <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>时间戳-格式 {{ date | dateFilter('YYYY-MM-DD)}}</h1>
                                
<h1>时间戳-格式 {{ date1 | dateFilter('YYYY-MM-DD hh:mm:ss)}}</h1>
                     
Vue.filter('dateFilter', (res, str) => {
	return moment(res).format(str)
})
                           

7. 局部过滤器

在 vm 的配置项里写一个 filters
对应的是一个对象

 filters: {
    date(res) {
		return moment(res).format('格式')
    }
  }