Vue Options API怎么使用 filters 选项编写文本格式化过滤器-Vue.js-PHP中文网

vue 2 的 options api 中 filters 选项用于声明局部过滤器，通过管道符 | 在模板中格式化文本，支持链式调用和传参，但 vue 3 已移除该功能。

vue options api怎么使用 filters 选项编写文本格式化过滤器

Vue 2 的 Options API 中，filters 选项用于声明局部过滤器，可在模板中通过管道符 | 对文本进行格式化处理。Vue 3 的 Composition API 已移除该功能，所以仅适用于 Vue 2 项目。

filters 选项的声明方式

在组件选项对象中，直接定义 filters 对象，其属性名为过滤器名称，值为接收原始值并返回处理后字符串的函数：

函数第一个参数是待处理的值（即管道符前的表达式结果）
后续参数（如有）需在模板中显式传入，不能解构或默认值自动生效
函数必须有返回值，且应为字符串（或可转为字符串的内容）

在模板中使用过滤器

用双花括号插值或 v-bind 绑定时，接 | 过滤器名 即可。支持链式调用，也支持传参：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

{{ price | currency }} → 调用无参过滤器
{{ message | truncate(20) }} → 传一个参数，对应过滤器函数的第二项
{{ date | formatDate('YYYY-MM-DD') | uppercase }} → 链式使用多个过滤器

常见过滤器示例

比如金额格式化、文本截断、日期格式化等，可这样写：

export default {
  filters: {
    currency(value) {
      if (value == null) return ''
      return '¥' + Number(value).toFixed(2)
    },
    truncate(value, length = 10) {
      if (!value) return ''
      return value.toString().length > length 
        ? value.toString().slice(0, length) + '...' 
        : value
    }
  }
}