Vue 中怎么自定义过滤器

首先我们先了解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中，过滤器被删除，不再受支持。相反，官方建议用方法调用或计算属性替换它们。