十分钟带你读懂Vue中的过滤器

什么是过滤器

过滤器（Filter）是Vue.js提供的一项非常实用的功能，它用于在渲染数据之前对数据进行一些处理。

在Vue中，我们可以使用过滤器来快速地处理数据，比如格式化日期、去除重复项等操作。

基本用法

在Vue中，我们可以通过filters选项来定义过滤器：

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

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

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

在上面的例子中，我们使用了capitalize过滤器来将message中的字符串首字母转换成大写。

传参

有时候我们需要对数据进行更加复杂的处理操作，这时候我们可以使用过滤器的传参功能。

在定义时，我们可以传递任意数量的参数给过滤器，同时使用|符号来分割过滤器名称和传递的参数：

<div id="app">
  <p>{{ message | truncate(20, '...') }}</p>
</div>

Vue.filter('truncate', function (value, length, suffix) {
  if (!value) return ''
  value = value.toString()
  if (value.length > length) {
    return value.substring(0, length) + suffix
  }
  else {
    return value
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Vue.js 是一个轻量级的 JavaScript 框架'
  }
})

在上面的例子中，我们使用了truncate过滤器来对message中的字符串进行截断操作，第一个参数20代表截取长度，第二个参数...代表截取后追加的字符串。

示例说明

下面我们举两个例子来说明Vue中过滤器的使用方法。

例子一：格式化日期

<div id="app">
  <p>{{ date | dateFormat('YYYY-MM-DD HH:mm:ss') }}</p>
</div>

Vue.filter('dateFormat', function (value, format) {
  if (!value) return ''
  return moment(value).format(format)
})

new Vue({
  el: '#app',
  data: {
    date: '2022-01-01 12:00:00'
  }
})

在上面的例子中，我们使用了dateFormat过滤器来将date中的时间格式化为YYYY-MM-DD HH:mm:ss的格式。

例子二：去除重复项

<div id="app">
  <p v-for="item in uniqueItems">{{ item }}</p>
</div>

Vue.filter('unique', function (value) {
  if (!value) return ''
  return Array.from(new Set(value))
})

new Vue({
  el: '#app',
  data: {
    items: ['a', 'b', 'c', 'a', 'b', 'c']
  },
  computed: {
    uniqueItems: function () {
      return this.items.filter(function (value, index, self) {
        return self.indexOf(value) === index
      })
    }
  }
})

在上面的例子中，我们使用了unique过滤器来去除items中的重复项并展示到页面中。