vue3如何使用filters

在 Vue 3 中，使用 filters 进行数据的格式化可以通过全局注册或在组件内部注册的方式实现。下面是两种方法的示例：

1. 全局注册：可以在应用程序的入口文件中注册全局过滤器，使其在整个应用程序中可用。例如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 定义过滤器函数
const capitalize = (value) => {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
}

const app = createApp(App)

// 注册全局过滤器
app.config.globalProperties.$filters = {
  capitalize
}

app.mount('#app')

在组件中使用过滤器：

<template>
  <div>
    <!-- 使用过滤器 -->
    <p>{{ text | capitalize }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'hello world'
    }
  }
}
</script>

2. 组件内部注册：可以在组件的选项中注册过滤器，并且仅在该组件中可用。例如：

<template>
  <div>
    <!-- 使用过滤器 -->
    <p>{{ text | capitalize }}</p>
  </div>
</template>

<script>
// 定义过滤器函数
const capitalize = (value) => {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
}

export default {
  data() {
    return {
      text: 'hello world'
    }
  },
  filters: {
    capitalize // 注册过滤器
  }
}
</script>

这样，你就可以在 Vue 3 中使用 filters 进行数据的格式化了。以上是基本的用法，你也可以按照自己的需要定义和使用其他过滤器函数。