Vue3 基础教程：利用 Vue.js 过滤器封装数据

在 Vue3 的开发过程中，利用过滤器对数据进行封装是一项极为实用的技能，它能让数据的展示和处理更加简洁高效。

Vue.js 的过滤器本质上是一个函数，用于对数据进行格式化和转换。在 Vue3 里，虽然官方推荐使用计算属性和方法来处理数据，但过滤器在某些场景下依然有着独特的优势。

创建一个过滤器非常简单。在组件中，可以通过 filters 选项来定义。例如：

export default {
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

上述代码定义了一个名为 capitalize 的过滤器，它能将字符串的首字母大写。在模板中使用这个过滤器也很方便：

<template>
  <div>
    <p>{{ 'hello world' | capitalize }}</p>
  </div>
</template>

运行这段代码，你会看到输出的文本 “Hello world”，首字母已经成功大写。

过滤器还支持链式调用。假设我们有一个日期字符串，想先格式化日期，再将格式化后的结果首字母大写。可以这样做：

export default {
  filters: {
    formatDate: function (dateStr) {
      const date = new Date(dateStr)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

在模板中：

<template>
  <div>
    <p>{{ '2023-10-05' | formatDate | capitalize }}</p>
  </div>
</template>

这样，先对日期进行格式化，再将格式化后的日期字符串首字母大写。

另外，全局过滤器也是 Vue3 中一个强大的功能。通过 app.config.globalProperties.$filters 可以定义全局可用的过滤器。例如：

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

const app = createApp(App)
app.config.globalProperties.$filters = {
  currency: function (value) {
    return '$' + value.toFixed(2)
  }
}
app.mount('#app')

在任何组件的模板中都能直接使用这个全局过滤器：

<template>
  <div>
    <p>{{ 100.5 | currency }}</p>
  </div>
</template>

Vue.js 的过滤器为我们封装和处理数据提供了一种便捷的方式，合理运用过滤器能提升代码的可维护性和可读性，让 Vue3 开发更加顺畅高效。