【Vue】全局过滤器和局部过滤器

Vue.js 允许自定义过滤器，可用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式，被添加在 JavaScript 表达式的尾部，由管道符 (" | ") 指示。过滤器分为全局过滤器和局部过滤器(私有过滤器)。

全局过滤器

过滤器的声明：Vue.filter("过滤器名称","回调函数")

简单过滤器的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="app"><p>{{msg}}</p><!-- 通过管道符 使用自定义的过滤器 --><p>{{msg | change}}</p></div><script>// 创建一个过滤器Vue.filter('change',function(msg){// 使用正则表达式 全局匹配return msg.replace(/过滤器/g,'变量')})var vm = new Vue({el: "#app",data: {msg:"过滤器，分为全局过滤器和局部过滤器"},})</script>
</body>
</html>

过滤器传参数

在通过管道符号来使用过滤器的时候，我们还可以通过传递参数来达到传值的效果。

<div id="app"><p>{{msg}}</p><p>{{msg | change('变量')}}</p>
</div>
<script>Vue.filter('change',function(msg, msg1){return msg.replace(/过滤器/g, msg1)})
</script>

多个过滤器同时使用

我们对一个信息处理的时候，可以同时使用多个管道符来调用多个过滤器来处理。

<div id="app"><p>{{msg}}</p><p>{{msg | change('变量') | change1}}</p>
</div>
<script>Vue.filter('change',function(msg, msg1){return msg.replace(/过滤器/g, msg1)})Vue.filter('change1',function(msg){return msg+'*************'})
</script>

何为全局过滤器

我们在页面中再增加一个div和一个Vue对象，然后在新增的div中使用我们前面定义的过滤器，来看看效果。

<div id="app"><p>{{msg}}</p><p>{{msg | change('变量') | change1}}</p>
</div>
<div id="app1"><p>{{msg1}}</p><p>{{msg1 | change('vue') | change1}}</p>
</div>
<script>Vue.filter('change',function(msg, msg1){return msg.replace(/过滤器/g, msg1)})Vue.filter('change1',function(msg){return msg+'*************'})var vm = new Vue({el: "#app",data: {msg:"过滤器，分为全局过滤器和局部过滤器"},})var vm1 = new Vue({el: "#app1",data: {msg1:"我们要熟练使用过滤器"},})
</script>

通过以上效果我们就能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用。

局部过滤器

相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用。

<div id="app"><p>{{msg}}</p><p>{{msg | change('变量') | change1}}</p>
</div>
<div id="app1"><p>{{msg1}}</p><p>{{msg1 | change('vue') | change1}}</p>
</div>
<script>//全局过滤器Vue.filter('change',function(msg, msg1){return msg.replace(/过滤器/g, msg1)})var vm = new Vue({el: "#app",data: {msg:"过滤器，分为全局过滤器和局部过滤器"},//局部过滤器filters:{change1:function(msg){return msg+'*************'}}})var vm1 = new Vue({el: "#app1",data: {msg1:"我们要熟练使用过滤器"},})
</script>

通过页面效果我们发现，在vm对象中定义的过滤器在vm1绑定的div中是不可以使用的。只能在定义的Vue对象绑定的div中使用，这就是局部过滤器。

注意：如果全局过滤器和局部过滤器同名的情况话，会通过就近原则调用局部过滤器！

在Vue案例（二）中，我们把前面介绍的一些常用指令综合运用了一下，但是还有个小问题，就是显示的创建时间 Time 的格式没有处理。

虽然我们可以在后台处理好后再传递给前端，但是在前端应该也需要能够自主的处理。现在我们可以通过Vue的过滤器来解决这个问题。

此处案例中我们通过局部过滤器来实现，当然你也可以通过全局过滤器来实现。

var vm = new Vue({el: "#app",data: {...},methods:{...},filters:{ msgDateFormat:function(msg){// 将字符串转换为Date类型var mt = new Date(msg)// 获取年份var y = mt.getFullYear()// 获取月份 从0开始 var m = (mt.getMonth()+1).toString().padStart(2,"0")// 获取天数var d = mt.getDate().toString().padStart(2,"0")// 获取小时var h = mt.getHours().toString().padStart(2,"0")// 获取分钟var mi = mt.getMinutes().toString().padStart(2,"0")// 获取秒var s = mt.getSeconds().toString().padStart(2,"0")// 拼接为我们需要的格式return y+"-"+m+"-"+d+" "+h+":"+mi+":"+s}}
})

知识拓展：

方法	说明
String.prototype.padStart(maxLength, fillString=’’)	字符串长度为maxLength，若是不够，在开头用fillString填充，例如 :“123”.padStart(6,“a”)=“aaa123”
String.prototype.padEnd(maxLength, fillString=’’)	与padStart类似，在结尾处填充，例如"123".padEnd(6,“a”)=“123aaa”