vue—filter 过滤器

filter是个神奇的东西，css中有filter属性，js里也有filter属性，vue也用filter做过滤器，这里详细讲一下vue中filter过滤器的用法~

vue中filter过滤器用法

后台返回值例如：性别：F—>女，M—>男，可以通过过滤器统一处理这样的返回值。

在入口main.js中引用filter过滤器:

import vueFilter from '@/mixins/format.js';
for (let key in vueFilter) {
  Vue.filter(key, vueFilter[key]);
}

引入的format.js代码如下:

/*
 * 后台数据处理 format
 */
const vFilter = {
  // 性别
  sexFormat: function (val) {
    if (val === 'F') {
      return '女';
    } else if (val === 'M') {
      return '男';
    } else if (val === '0') {
      return '其他';
    } else {
      return '未知';
    }
  },

  // 婚姻状况
  marryFormat: function (val) {
    if (val === '0') {
      return '未婚';
    } else if (val === '1') {
      return '已婚';
    }
  },

  // 日期 2018-11-16 10:55:58
  dateFormat: function (val) {
    if (val) {
      return val.slice(0, 16) || '';
    }
  },

  // 日期 2018-11-16T03:34:03.000+0000
  dateFormat2: function (val) {
    if (val) {
      var arr = val.split('T');
      return arr[0] + ' ' + arr[1].slice(0, 5);
    }
  }
};
export default vFilter;

在vue文件中就可以直接使用定义的过滤器啦~

<div><label>性别</label>{{patientSex | sexFormat}}</div>
<script>
export default {
  data () {
    return {
      patientSex : 'F'
    }
  }
}
</script>