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
订单状态:未付款
 

你可能感兴趣的:(前端,vue,项目中,自定义过滤器,全局使用,filter,自定义过滤器,全局使用,filter,自定义过滤器,全局使用,filter)