原理步骤如下:
- 将filter方法暴露出来
- 挂载在vue实例上
- 直接使用
对应的操作为:
- 在公共方法文件夹utils内新建filters.js文件
- 在main.js中对filters中暴露的方法进行挂在vue中
- 在项目任意页面直接使用
以时间过滤为例,代码如下:
filters.js
// 此文件为公共的全局过滤器
// 时间戳格式化过滤器,传参如下:
// value:时间戳,string,number均可
// num:返回样式,默认1(1:2020/12/16)(2:2020-12-16 12:12:12)
exports.formatDate = (value,num=1)=>{
if(!vulue ) return "未传入时间戳";
const date = new Date(+value)
const y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? ('0' + MM) : MM
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
let h = date.getHours()
h = h < 10 ? ('0' + h) : h
let m = date.getMinutes()
m = m < 10 ? ('0' + m) : m
let s = date.getSeconds()
s = s < 10 ? ('0' + s) : s
if(+num === 1){
return y + '/' + MM + '/' + d
}else if(+num === 2){
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
}
}
// 价格格式化过滤器,传参如下:
// value:价格,string,number均可
exports.formatPrice = (value)=>{
...
// 格式化的代码逻辑
...
}
...
main.js
import Vue from 'vue'
import App from './App'
import filters from './utils/filters'
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
任意页面:
<span>时间:{{time | formatDate}}</span>
<span>价格:{{price | formatPrice}}</span>