vue 项目中 自定义过滤器 全局使用 filter

新建filter文件
src目录下新建filters目录，filters目录里新建index.js文件

 

exports.formatMoney = (value) => {
  if (value) {
    value = Number(value);
    return '￥ ' + value.toFixed(2);
  }
};

exports.statusName = (val) => {
  let statusName = '';
  switch (val) {
    case 0: {
      statusName = '已取消';
      break;
    }
    case 10: {
      statusName = '未付款';
      break;
    }
    case 20: {
      statusName = '已付款';
      break;
    }
  }
  return statusName;
};

main.js里注册filter

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

注册filter后main如下

import Vue from 'vue'
import App from './App'
import router from './router'
import Mixin from './mixins';
import filters from './filters';
Vue.mixin(Mixin);

Vue.config.productionTip = false
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

使用
 

页面展示结果
这是index页面
Index
About
Product

价格：￥ 95.00
订单状态：未付款