过滤器（filter）的基本使用 + 时间戳转化为相对日期过滤器代码封装

过滤器（filter）的基本使用

概述

1. 过滤器实质不改变原始数据，只是对数据进行加工处理后，return回过滤后的数据再进行调用处理
2. 过滤器:本质是就是一个函数，用来做格式转换。例如：把一个标准时间转成相对时间。

格式

• 局部定义

  filters：{
  过滤器名字（要被处理的值）{
  // …
  return 处理后的结果
  }
  }

• 局部使用

  {{ 原数据 | 过滤器名字 }}
  // 相当于 {{ 过滤器名(原数据) }}

• 全局定义

  Vue.filter(‘过滤器名’， (oldVal) => {
  // …
  return 处理后的结果
  })

• 全局使用

  {{ 原数据 | 过滤器名 }}
  // 相当于 {{ 过滤器名(原数据) }}

Vue组件中过滤器分为两种

• 全局过滤器

  {{ filterElement | filterName }}

• 局部过滤器

  // 创建 Vue 实例，得到 ViewModel

  var vm = new Vue({
  el: ‘#app’,
  data: {
  msg: ‘曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人’
  },
  methods: {},

    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
         dataFormat(msg) {
                return msg+'xxxxx';
         }
     }
  

  });

注意

• 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
• 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
• 全局过滤器注册时是filter，没有s。而局部过滤器注册时是filters，是有s的

移动端项目—封装时间戳转化相对日期过滤器

功能展示图

逐级优化：局部过滤器 —> 封装全局过滤器 —> 再封装成插件，使用Vue.use

• 局部过滤器

  relativeTime (val) {
  const t = new Date(val)
  const diff = Date.now() - t.getTime()

      const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
      if (year) {
        return `${year}年前`
      }
      const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
      if (month) {
        return `${month}月前`
      }
      const day = Math.floor(diff / (1000 * 3600 * 24))
      if (day) {
        return `${day}天前`
      }
      const hour = Math.floor(diff / (1000 * 3600))
      if (hour) {
        return `${hour}小时前`
      }
      const minute = Math.floor(diff / (1000 * 60))
      if (minute) {
        return `${minute}分钟前`
      } else {
        return '刚才'
      }
    }
  

使用：

<!-- 文字区域 -->
<div class="meta">
	<span>{{article.aut_name}}</span>
	<span>{{article.comm_count}}评论</span>
	
	// 被过滤数据 | 过滤器名字
+   <span>{{article.pubdate | relativeTime}}</span>
</div>

• 全局过滤器（在main.js中，添加全局过滤器）

  // 全局过滤器
  Vue.filter(‘relativeTime’, (oldTime) => {
  const t = new Date(oldTime)
  // Date.now()：现在的时间戳（毫秒）
  // t.getTime()：旧时间的时间戳（毫秒）

  const diff = Date.now() - t.getTime() // 相隔多少毫秒
  // Math.floor 向下取整： 1.7年 ---> 1年前
  const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
  if (year) {
    return `${year}年前`
  }
  const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
  if (month) {
    return `${month}月前`
  }
  const day = Math.floor(diff / (1000 * 3600 * 24))
  if (day) {
    return `${day}天前`
  }
  const hour = Math.floor(diff / (1000 * 3600))
  if (hour) {
    return `${hour}小时前`
  }
  const minute = Math.floor(diff / (1000 * 60))
  if (minute) {
    return `${minute}分钟前`
  } else {
    return '刚刚'
  }
  

  })

• 把过滤器单独封装成一个插件，以便多项目复用

  1. 在utils创建filters.js

  // 日期过滤器单独封装的模块
  export const relativeTime = (oldtime) => {
  // 将旧的时间转为时间戳
  const t = new Date(oldtime)
  // 现在时间戳 - 旧时间戳
  const diff = Date.now() - t.getTime()

  // Math.floor 向下取整
  const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
  if (year) {
    return `${year}年前`
  }
  const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
  if (month) {
    return `${month}月前`
  }
  const day = Math.floor(diff / (1000 * 3600 * 24))
  if (day) {
    return `${day}天前`
  }
  const hour = Math.floor(diff / (1000 * 3600))
  if (hour) {
    return `${hour}小时前`
  }
  const minute = Math.floor(diff / (1000 * 60))
  if (minute) {
    return `${minute}分种前`
  } else {
    return '刚才'
  }
  

  }

  export default {
  install (Vue) {
  // 全局过滤器（日期过滤器）过滤器名字 上面封装的函数名
  Vue.filter(‘relativeTime’, relativeTime)
  }
  }

2. 在main.js中导入该插件，并使用（Vue.use()）

   // 导入日期过滤器
   import filter from ‘./utils/filters’

   // filter中有叫relativeTime的过滤器
   Vue.use(filter)

3. 使用：

   {{article.aut_name}} {{article.comm_count}}评论

    // 被过滤数据 | 过滤器名字
   

   • {{article.pubdate | relativeTime}}

图解filter插件封装

用Vue.use()以插件的格式来导入过滤器的功能

参考：Vue.use

操作：

1. 在filters.js中默认导出一个对象，其中有一个install方法 ------- 默认导出的就是一个vue插件。
2. 在main.js中导入这个插件，并使用（Vue.use()）