Vue的过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

复制<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

自定义一个首写字母变大写的过滤器

复制<div>{{ text|capitalize }}</div>
<script>
new Vue({
  data() {
    return {
      text: 'hello',
    }
  },
  filters: { // 局部定义
    capitalize: function (val) {
      if (!val) return '';
      val = val.toString();
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
});
Vue.filter('capitalize', function (value) {...}); //全局定义
</script>

内置的过滤器

• {{ expression | capitalize }}：将字符串的第一个字符转换为大写字母。
• {{ expression | uppercase }}：将字符串中所有的字符都转换为大写字母。
• {{ expression | lowercase }}：将字符串中所有的字符都转换为小写字母。
• {{ expression | currency }}：将数字格式化为货币金额（默认使用美元符号）。
• {{ expression | pluralize }}：将单词变成复数形式。
• {{ expression | truncate }}：截断字符串并添加省略号。
• {{ expression | limitBy }}：限制数组的长度。
• {{ expression | orderBy }}：按照指定的属性或表达式对数组进行排序。