vue 内置过滤器的使用总结(附加自定义过滤器)

下面是详细讲解“vue 内置过滤器的使用总结(附加自定义过滤器)”的完整攻略，过程中将给出两个示例来说明。

1. vue 内置过滤器

Vue 提供了一些内置的过滤器，用于快速展示数据的不同格式。这些过滤器可以在插值表达式和 v-bind 指令中使用。

1.1 文本格式化

{{message | capitalize}}: 将信息的第一个字母大写。
{{message | uppercase}}: 将信息全部转换为大写。
{{message | lowercase}}: 将信息全部转换为小写。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

1.2 数字格式化

{{ price | currency }}: 将价格格式化为货币，如 $1,000.00。
{{ number | pluralize }}: 根据数字为单数或者复数添加 s，如 1 item，2 items。

<div id="app">
  <p>{{ price | currency }}</p>
  <p>{{ itemCount | pluralize('item', 'items') }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    price: 1000,
    itemCount: 2
  },
  filters: {
    currency: function(value) {
      return '$' + value.toFixed(2)
    },
    pluralize: function(value, singular, plural) {
      if (value === 1) {
        return value + ' ' + singular
      } else {
        return value + ' ' + plural
      }
    }
  }
})

2. 自定义过滤器

当内置的过滤器满足不了需求时，我们可以自己定义过滤器。

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    myFilter: function(value) {
      // 这里写你想要实现的过滤器逻辑
    }
  }
})

自定义过滤器函数接受一个值作为参数，并返回过滤后的值。