Vue中过滤器Filter的讲解

Vue中的 Filter 可以用来格式化输出内容，例如格式化日期、货币、大小写等。 Filter 本质上就是一个方法，它接收一个输入值，经过处理后返回一个输出值。以下是 Filter 的基本使用方法和示例说明。

基本使用方法

在 Vue 组件选项中声明 filters 对象，可以包含多个自定义 Filter 函数。示例：

Vue.component('my-component', {
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

声明一个名为 capitalize 的 Filter 函数来格式化字符串，该函数的输入参数为字符串，经过处理后返回一个大写字母开头的字符串。

在模板中使用 Filter 函数格式化输出内容，示例：

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

message 是一个字符串，使用 capitalize Filter 函数将该字符串格式化为大写字母开头的字符串输出。

示例说明

格式化日期示例

Vue.filter('formatDate', function (value) {
  if (!value) return ''
  value = new Date(value)
  var month = value.getMonth() + 1
  var day = value.getDate()
  var year = value.getFullYear()
  return month + '/' + day + '/' + year
})

new Vue({
  // ...
})

声明了一个名为 formatDate 的 Filter 函数，该函数接收一个日期值 value，将其转化为日期格式输出，例如：将日期值 2020-01-01 格式化为 1/1/2020。在模板中使用该 Filter 函数：

<div>
  {{ post.publishDate | formatDate }}
</div>

post.publishDate 是一个日期值，在模板中使用 formatDate Filter 函数将该值格式化输出。

格式化金额示例

Vue.filter('formatMoney', function (value) {
  if (!value) return ''
  value = parseFloat(value)
  value = value.toFixed(2)
  return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
})

new Vue({
  // ...
})

声明了一个名为 formatMoney 的 Filter 函数，该函数接收一个数值 value，将其格式化为货币格式输出，例如：将数值 10000.99 格式化为 $10,000.99。在模板中使用该 Filter 函数：

<div>
  {{ order.total | formatMoney }}
</div>

order.total 是一个数值，使用 formatMoney Filter 函数将该数值格式化成货币格式输出。

总结

Vue 中 Filter 的使用方式非常方便，只需要声明一个 Filter 函数并在模板中使用即可。可以使用 Filter 函数实现各种各样的数据格式化操作，例如格式化日期、货币、大小写等。