Vue 中怎么自定义过滤器

在 Vue 中，自定义过滤器（filters）是一种格式化文本输出的方式，通常用于模板中的数据展示。Vue 3 已废弃过滤器语法，但 Vue 2 仍然支持。

Vue 2 中自定义过滤器的写法

全局过滤器定义

// main.js 中注册全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  return value.toString().charAt(0).toUpperCase() + value.slice(1)
})

使用方式：

{{ 'hello' | capitalize }}  <!-- 输出：Hello -->

局部过滤器定义

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

<script>
export default {
  data() {
    return {
      message: 'world'
    }
  },
  filters: {
    capitalize(value) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

示例：格式化价格

// js
Vue.filter('currency', function (val) {
  if (!val) return '￥0.00'
  return '￥' + parseFloat(val).toFixed(2)
})

// html
{{ 123.456 | currency }} <!-- 输出：￥123.46 -->