Vue项目中定义过滤器（全局和单组件）

官网描述 https://cn.vuejs.org/v2/guide/filters.html

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

定义全局过滤器

文件布局位置

// 实现一个给所有数字小数部分都变成两位，没有后补零
export const yuan = value =>
  value
    ? (value / 100).toFixed(2)
    : value;

export default {
  install(Vue) {
    Vue.filter('yuan', yuan);
  }
};

在main.js里这样子引入

import filters from '@/filter';
Vue.use(filters);

可以在任意组件内使用只能是在v-bind或者双花括号插值里用

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

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

定义单组件过滤器

// 组件内直接用
filters: {
    yuan(value) {
      return value ? (value / 100).toFixed(2) : value
    }
}

使用方案和全局一致