2023Vue 中使用 filters 实现数据格式化及数据过滤的技巧

Vue.js 是一款流行的 JavaScript 框架，它提供了许多实用的功能和工具来帮助前端开发人员开发优秀的应用程序。其中，filters（过滤器）是 Vue.js 中一个非常有用的功能，它可以用于数据的格式化和过滤。

在 Vue 中，filters 相当于模板中的管道，可以用来对数据进行处理和转换。比如，我们可以使用 filters 把日期格式从原始日期字符串转化为人类友好的日期格式，或者把数字格式化成货币格式。

在本文中，我们将介绍一些 Vue 中使用 filters 实现数据格式化及数据过滤的技巧，让你的应用程序变得更加优雅和易于维护。

1. 创建 filter

在 Vue 中，我们可以通过 Vue.filter 方法来创建一个 filter。该方法需要两个参数：过滤器的名字和具体的处理函数。例如：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

以上代码创建了一个名为 capitalize 的 filter，它将字符串的第一个字符转换为大写字母。该 filter 可以在模板中使用：

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

2. 处理数组

当我们有一个数组需要处理时，可以使用 filter 方法来过滤或转换数组中的数据。例如：

Vue.filter('excludeSpaces', function (arr) {
  return arr.filter(function (item) {
    return item.indexOf(' ') < 0
  })
})

以上代码创建了一个名为 excludeSpaces 的 filter，它将过滤数组中包含空格的元素。该 filter 可以在模板中使用：

<div>{{ ['Hello World', 'Vue Developer', 'Goodbye'] | excludeSpaces }}</div>

输出结果为：["Vue Developer", "Goodbye"]。

3. 处理日期

在 Vue 中，我们可以使用 moment.js 库来处理日期，也可以使用自定义 filters 来格式化日期。

下面是一个使用 filters 格式化日期的示例：

Vue.filter('formatDate', function (value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY hh:mm')
  }
})

以上代码创建了一个名为 formatDate 的 filter，它将日期格式化为 MM/DD/YYYY hh:mm 的格式。该 filter 可以在模板中使用：

<div>{{ date | formatDate }}</div>

4. 处理数字

在 Vue 中，我们可以使用 filters 来格式化数字。下面是一个将数字转换为货币格式的示例：

Vue.filter('formatPrice', function (value) {
  if (!value) return ''
  let val = (value / 1).toFixed(2).replace(',', '.')
  return '$' + val.toString().replace(/B(?=(d{3})+(?!d))/g, ',')
})

以上代码创建了一个名为 formatPrice 的 filter，它将数字格式化为货币格式。该 filter 可以在模板中使用：

<div>{{ price | formatPrice }}</div>

5. 结合计算属性

在 Vue 中，我们可以结合计算属性和 filters，进一步扩展 filters 的功能。例如：

Vue.filter('uppercase', function (value) {
  if (!value) return ''
  return value.toString().toUpperCase()
})

Vue.filter('length', function (value) {
  if (!value) return ''
  return value.length
})

new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  computed: {
    upperMessage () {
      return this.message | uppercase
    },
    messageLength () {
      return this.message | length
    }
  }
})

以上代码使用 uppercase 和 length 两个 filters，在计算属性中对数据进行处理和转换。

在模板中使用：

<div>{{ upperMessage }}</div>
<div>{{ message | uppercase | length }}</div>
<div>{{ messageLength }}</div>

以上代码最终输出结果为：

HELLO VUE
9
9

6. 总结

Vue 中的 filters 功能非常强大，可以用于数据的格式化和过滤，并且还可以结合计算属性来进一步扩展功能。在实际开发中，利用 filters 可以大大简化代码的复杂度，提高代码的可维护性和可读性。如果你在使用 Vue 过程中还没有使用 filters，不妨尝试一下吧！