vue过滤器使用 filter

1.filter的使用场景，一般为当后端返回数据为判断显示某个内容时，原来通常使用v-if现在改用filter便于管理

1.创建filter文件

import Vue from 'vue';

/*订单页面详情页面,状态栏*/
Vue.filter('settleAccountsType',(val)=>{
  if(val==4){
    return `订单已取消！`
  }else if(val==5) {
    return `订单已作废！`
  }
  else if(val==6) {
    return `订单申请退款`
  }else{
    return ``
  }
});
export default {

}

2.在main中挂载

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
import $ from 'jquery'
import axios from 'axios'//引入axios
import Vuex from 'vuex'
import store from './store/store';
import filter from '@/assets/js/filter.js';//过滤器全局

Vue.config.productionTip = false;

Vue.use(ElementUI);
Vue.use(Vuex);
// Vue.use(axios);
Vue.prototype.axios = axios;
Vue.use(filter);//过滤器全局挂载

/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  filter,//过滤器全局挂载
  store,//使用store
  components: { App },
  template: '<App/>'
});

3.在页面使用

<!--过滤器使用-->
      <div class="statusIf">{{ status | settleAccountsType }}</div>
解释：status ：vue页面绑定的数据，就是原来v-if判断的数据
         settleAccountsType ：过滤器js中的方法名