vue2怎么自定义过滤器

Vue2 中自定义过滤器有两种方式：

1. 全局过滤器：在 Vue 实例化之前定义全局过滤器，可以在任何组件中使用。

// 定义全局过滤器
Vue.filter('toUpper', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.toUpperCase()
})

// 在组件中使用
<template>
  <div>{{ message | toUpper }}</div>
</template>

2. 局部过滤器：在组件的 filters 选项中定义局部过滤器，只能在当前组件中使用。

<template>
  <div>{{ message | toUpper }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello, world!'
    }
  },
  filters: {
    toUpper(value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    }
  }
}
</script>

以上两种方式都可以自定义过滤器，只需要在过滤器函数中接收需要过滤的值，进行处理后返回即可。