首先我们先了解Vue里的过滤器是怎么用的
Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind
表达式。过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示
Vue的过滤器有两种使用方式
1、全局注册
Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回
转换后的值
Vue .filter( 'reverse' , function (value) {
return value.split( '' ).reverse().join( '' )
这样我们就可以在全局使用reverse过滤器了
<span v-text = "message | reverse"></span>
2、局部注册
如果你定义了一个共用的过滤方法，然后想在某一个页面里用到这个过滤方法，可以这么做
// 首先在共用文件里写好一个过滤方法，然后引入你的共用文件
import util from '@/libs/util.methods'
// 在你的页面代码里添加过滤器
filters: {
'filtersName': function (value) {
// return你的共用过滤方法
return util.YourFilterName(value)
然后你在 HTML 代码里面就可以使用管道符来调用这个过滤器了，比如：
<div>{{ item.deviceGroupId | filtersName }}</div>
VUE 3.0版本
在最新版的Vue 3.0版本中,filter(过滤器)已经被删除了,虽然过滤器看起来很方便，但它需要一个自定义语法，打破大括号内表达式 “只是JavaScript” 的原则，这既增加了学习成本，也增加实现逻辑的成本。
在3.x中，过滤器被删除，不再受支持。相反，官方建议用方法调用或计算属性替换它们。
