过滤器（filter）的基本使用
概述
- 过滤器实质不改变原始数据，只是对数据进行加工处理后，return回过滤后的数据再进行调用处理
- 过滤器:本质是就是一个函数，用来做格式转换。例如：把一个标准时间转成相对时间。
格式
- 局部定义
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 '刚刚' }
- })
- 把过滤器单独封装成一个插件，以便多项目复用
- 在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)
}
}
- 在main.js中导入该插件，并使用（Vue.use()）
// 导入日期过滤器
import filter from ‘./utils/filters’
// filter中有叫relativeTime的过滤器
Vue.use(filter) - 使用：{{article.aut_name}} {{article.comm_count}}评论
// 被过滤数据 | 过滤器名字
- {{article.pubdate | relativeTime}}
图解filter插件封装
用Vue.use()以插件的格式来导入过滤器的功能
参考：Vue.use
操作：
- 在filters.js中默认导出一个对象，其中有一个install方法 ------- 默认导出的就是一个vue插件。
- 在main.js中导入这个插件，并使用（Vue.use()）
