Vue过滤器的基本用法

Vue.js 中提供了过滤器机制，开发人员可以利用过滤器机制，实现常用文本的格式化。过滤器可以用在双花括号插值和 v-bind 表达式里。

过滤器应该被添加到 JavaScript 表达式的尾部，由管道符指示，代码如下：

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

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

可以定义两种过滤器。一种是在组件内部，用于定义一个本地过滤器，只能在组件内部使用，代码如下：

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

另一种在创建 Vue.js 实例之前，定义全局过滤器，代码如下：

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

new Vue({
  // 对象属性
});

分别定义和使用一个局部和全局过滤器。在 SubComponent 组件中，定义 capitalize 局部过滤器和 globalCapitalize 全局过滤器，代码如下：

<div id="app">
  <input type="text" v-model="value" />
  <sub-component :value="value"></sub-component>
  <input type="text" v-bind:value="value | globalCapitalize" />
</div>

<script type="text/JavaScript">
const SubComponent = {
  template: '<div>{{ value | capitalize }}</div>',
  props: ['value'],
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      let values = value.split('');
      values.forEach(function(element, index, values) {
        values[index] = element.charAt(0).toUpperCase() + element.slice(1);
      });
      return values.join('');
    }
  }
};

// 全局过滤器
Vue.filter('globalCapitalize', function(value) {
  if (!value) return '';
  value = value.toString();
  let values = value.split(' ');
  values.forEach(function(element, index, values) {
    values[index] = element.charAt(0).toUpperCase() + element.slice(1);
  });
  return values.join(' ');
});

// 创建Vue.js对象
const vm = new Vue({
  el: '#app',
  data() {
    return {
      value: 'default value'
    }
  },
  components: {
    SubComponent
  }
});
</script>