Vue-全局过滤器以及进阶操作

╰+哭是因爲堅強的太久メ 2023-09-26 22:59 105阅读 0赞

## 前言 ##

上篇文件讲述了，Vue全局过滤器的基本使用：[Vue过滤器的基本使用][Vue]

本篇将延续上文，讲述vue中过滤器的进阶操作

## 过滤器传参 ##

如果有一天，多个地方使用过滤器，而且需要传递参数，那么可以这么写

![在这里插入图片描述][894ef7e645a34723a08b7e58dcae2bf6.png]

![在这里插入图片描述][184f5652b40c4c89b57c41e81ecf609e.png]

## 多个过滤器串联使用 ##

多个过滤器直接是可以串联的，使用 |(管道符)xxx拼接即可  
比如我要转化后截取当前年，就可以这么写

![在这里插入图片描述][f71922a57b1e497c941ef8c067d83ca3.png]

![在这里插入图片描述][6118013b031141fe8e39534e95ed8c1c.png]

## 全局过滤器 ##

现在写的filter过滤器，都是局部的，只能在vm中使用，但是如果有组件，比如组件A写了一个filterA过滤器，组件B写了一个filterB过滤器，那么组件B就不能使用filterA，当然组件A也不能使用filterB，如何解决这个问题呢，就要使用全局过滤器

![在这里插入图片描述][5950944e12a34212bace7cf1b33a3562.png]

通过例子验证说明局部过滤器，现在再写一个div容器创建一个vue实例

![在这里插入图片描述][9812136239fd45dbb000c09defc5c450.png]

![在这里插入图片描述][64d1a0b85b8d4b228c263f108d8c5479.png]

现在我觉得msg的内容太长了，想调用截取过滤器

![在这里插入图片描述][47afe8f3e6454c4581c22b9e5f5042cd.png]

看到报错了，说不能找到过滤器mySlice，强有力的证明了局部过滤器的局限性

![在这里插入图片描述][91c71687d49046beb3c29cd31f8cf5e6.png]

如果想开启全局的过滤器配置，可以使用命令

// 注册全局过滤器 注意：vue中过滤器是filters,在这里是filter
        //需要先准备过滤器再创建实例，顺序不能错
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

![在这里插入图片描述][3bc304766bf544f3ab26cfb12c23127c.png]

查看页面，使用过滤器成功

![在这里插入图片描述][43ce5701b7f94e8e8949a9ac9aabd196.png]

## v-bind使用过滤器 ##

过滤器不止是只能写在插值语法里面的，还可以写在v-bind，但是通常这些写法比较少，下面一起看下把  
比如这个例子，很明显有多余的字符，我就可以使用过滤器截取

![在这里插入图片描述][436465276ac94857a92ced395f1878f3.png]

查看页面，截取到了

![在这里插入图片描述][8c2a6efb1a3f4f2e878b6507bacd4cf4.png]

> 只能配合插值语法或者v-bind使用！使用v-model会报错的！这里就不演示了

## 总结 ##

过滤器  
定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理，过于复杂的可以使用计算属性)  
语法：  
1：注册过滤器，Vue.filter(name,callback)或new Vue(filters:\{\})  
2：使用过滤器：\{ \{xxx | 过滤器名称\}\}或v-bind:属性=“xxx” | 过滤器名称  
备注：  
1：过滤器也可以接收额外参数，多个过滤器之间可以配合使用  
2：并没有改变原来的数据，是产生新的对应的数据

[Vue]: https://blog.csdn.net/weixin_46713508/article/details/130336664
[894ef7e645a34723a08b7e58dcae2bf6.png]: https://img-blog.csdnimg.cn/894ef7e645a34723a08b7e58dcae2bf6.png
[184f5652b40c4c89b57c41e81ecf609e.png]: https://img-blog.csdnimg.cn/184f5652b40c4c89b57c41e81ecf609e.png
[f71922a57b1e497c941ef8c067d83ca3.png]: https://img-blog.csdnimg.cn/f71922a57b1e497c941ef8c067d83ca3.png
[6118013b031141fe8e39534e95ed8c1c.png]: https://img-blog.csdnimg.cn/6118013b031141fe8e39534e95ed8c1c.png
[5950944e12a34212bace7cf1b33a3562.png]: https://img-blog.csdnimg.cn/5950944e12a34212bace7cf1b33a3562.png
[9812136239fd45dbb000c09defc5c450.png]: https://img-blog.csdnimg.cn/9812136239fd45dbb000c09defc5c450.png
[64d1a0b85b8d4b228c263f108d8c5479.png]: https://img-blog.csdnimg.cn/64d1a0b85b8d4b228c263f108d8c5479.png
[47afe8f3e6454c4581c22b9e5f5042cd.png]: https://img-blog.csdnimg.cn/47afe8f3e6454c4581c22b9e5f5042cd.png
[91c71687d49046beb3c29cd31f8cf5e6.png]: https://img-blog.csdnimg.cn/91c71687d49046beb3c29cd31f8cf5e6.png
[3bc304766bf544f3ab26cfb12c23127c.png]: https://img-blog.csdnimg.cn/3bc304766bf544f3ab26cfb12c23127c.png
[43ce5701b7f94e8e8949a9ac9aabd196.png]: https://img-blog.csdnimg.cn/43ce5701b7f94e8e8949a9ac9aabd196.png
[436465276ac94857a92ced395f1878f3.png]: https://img-blog.csdnimg.cn/436465276ac94857a92ced395f1878f3.png
[8c2a6efb1a3f4f2e878b6507bacd4cf4.png]: https://img-blog.csdnimg.cn/8c2a6efb1a3f4f2e878b6507bacd4cf4.png