vue filter过滤器简单介绍一下，就是把一个数经过过滤器之后变换出来的另一种方式呈现，比如时间的格式化，或者添加一些装饰之类的等。
过滤器分为两种：一种全局过滤器；另一种是局部过滤器
1，全局过滤器
1，在 mian.js 中定义全局过滤器
Vue.filter('allFilter',function(val){
return val + '我是全局过滤器'
})
2，在其他的页面中调用
<div>{{ value | allFilter }}</div>
image.png
注：如果过滤器定义的比较多时，我们可以单独建立一个文件，之后把这个文件引入到 main.js 中的即可
2，局部过滤器
1，在定义局部过滤器页面中定义
export default {
props: ["dir"],
data() {
return { };
},
filters: {
allFilter(val) {
return val + "我是局部过滤器";
}
}
};
2，在其他的页面中调用
<div>{{ value | allFilter }}</div>
image.png
3，过滤器传参
注：如果是文字之类的，也可以用过滤器替换其中的一些词
案例是全局过滤器，局部过滤器同理
Vue.filter('msgformat',function( msg, value ){
//字符串 replace 方法，第一个参数，除了写一个 字符串之外，还可以定义一个正则，g修饰符表示全局匹配
return msg.replace(/单纯/g, value )
})
页面中调用
<p>{{ msg | msgformat('美丽') }}</p>
export default {
props: ["dir"],
data() {
return {// 把 msg 里面的 单纯 变为 美丽
msg:'我是一个单纯的少女，单纯的我，傻傻地问，世界上谁才是最单纯的人'
};
},
}
展示：
image.png
注：过滤器可以传递多个参数
Vue.filter('msgformat',function( msg, value1，value2 ){
//字符串 replace 方法，第一个参数，除了写一个 字符串之外，还可以定义一个正则，g修饰符表示全局匹配
return msg.replace(/单纯/g, value1+value2 )
})
<p>{{ msg | msgformat('美丽'，'123') }}</p>
展示：
image.png
过滤器还可以进行叠加使用
// 在main.js 定义两个全局过滤器
Vue.filter('allFilter',function(msg,value1,value2){
return msg.replace(/单纯/g, value1+value2 )
})
Vue.filter('allFilter2',function(msg,value1){
return value1+ '!!!'
})
// 页面中调用
<div>{{ msg | allFilter('美丽','123') | allFilter2(msg)}}</div>
同理，局部过滤器也是同样的方法
以上就是过滤器的用法
补充：时间格式化
Vue.filter('dateformat', function (datestr, pattern = '') {
//根据给的时间符串，得到特定的时间
var dt = new Date(datestr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
//return y + '-'+ m + '-' + 'd'
//return 'yyyy+mm+dd'
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}` //这个的引号是 反引号，在键盘1的左边
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `$(y)-$(m)-$(d) $(hh):$(mm):$(ss)`
}
})
我写了一个简单的 vue 这方面的 dome，链接：https://github.com/zhongmin2011/vue-dome
