vue3怎么使用过滤器

vue 3 中使用过滤器可以对数据进行格式化、转换或操作，在模板中更方便地显示。方式包括全局过滤器、局部过滤器和第三方库。可以使用参数和链式调用，自定义参数。vue 3 还提供几个内置过滤器，如 json、lowercase、uppercase、capitalize 和 trim。

Vue 3 中使用过滤器

在 Vue 3 中使用过滤器，可以对数据进行格式化、转换或操作，从而在模板中以更方便和可读的方式显示。

用法：

在 Vue 3 中使用过滤器非常简单：

立即学习“前端免费学习笔记（深入）”；

{{ value | filterName }}

其中：

• value 要过滤的数据
• filterName 过滤器的名称

创建过滤器：

可以通过多种方式创建过滤器：

• 全局过滤器：在 main.js 中使用 app.config.globalProperties 注册全局过滤器：

import { app } from 'vue'

app.config.globalProperties.$myFilter = (value) => { /* filter implementation */ }

• 局部过滤器：在组件中使用 filters 选项注册局部过滤器：

export default {
  filters: {
    myFilter(value) { /* filter implementation */ }
  }
}

• 第三方库：使用第三方库（如 vue-filters）注册过滤器，该库提供了预定义的过滤器集合。

示例：

以下是一个将数字转换为货币格式的过滤器示例：

export default {
  filters: {
    currency(value) {
      return `$${value.toFixed(2)}`
    }
  }
}

然后，可以在模板中使用过滤器：

<p>{{ price | currency }}</p>

参数和链式调用：

过滤器可以接受参数，并可以链式调用：

{{ value | filter1(arg1, arg2) | filter2 }}

自定义参数：

还可以使用 v-bind 自定义过滤器参数：

<p>{{ price | currency(:digits) }}</p>

其中 :digits 是一个自定义参数。

内置过滤器：

Vue 3 提供了几个内置过滤器，包括：

• json：将对象或数组转换为 JSON 字符串
• lowercase：将字符串转换为小写
• uppercase：将字符串转换为大写
• capitalize：将字符串的首字母大写
• trim：去除字符串两端的空格