Vue.filter 过滤器

Posted 2020-11-17 liangcheng11

【过滤器】

import Vue from ‘../../../node_modules/vue/dist/vue‘;

// 后台数据与前端展示数据需要换算，与后台交互的请求的参数是不需要。假如说前端展示价格是按照元来算，而后台提供的数据是按分来算，在提交给后台，还是按照分来算。

// 全局过滤器
Vue.filter(‘YuanToFen‘, function (value) {
  if (!Number(value)) return 0;
  value = Number(value);
  return Number(value) / 100;
});

const app = new Vue({
  // el: ‘#app‘,
  template: ‘<div @click="testhandler" ref="test">{{ price | YuanToFen }} content</div>‘,
  data: {
    price: 100, // 以分为单位
  },
  // 本地创建过滤器
  filter: { 
    YuanToFen (value) {
      if (!Number(value)) return 0;
      value = Number(value);
      return Number(value) / 100;
    },
  },
});

Vue.config.devtools = false;
// Vue.config.silent = true; // 取消vue的报错信息
app.$mount(‘#app‘);