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

1. 在 vue 文件引用 filter 过滤器用法

// 需求：要实现钱数格式 9900 -> 9,990.00
<template> {{val |filterMoney}} </template>
<script>
export default {
  data () {
    val: ''
  },
  filters: {
    filterMoney (money) {
        return Number(money).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    }
  }
}
</script>

2. 在 vue 中全局引用 filter 过滤器用法

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

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

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

或

//全局过滤器
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

引入的format/index.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>
import filter from '@/filters/index'
export default {
  data () {
    return {
      patientSex : 'F'
    }
  }
}
</script>

3. filter 过滤器（多参数）传参

3.1 传1个参数

//html
{{a1 | filterAa}}
//js
filters:{
  filterAa(a1){
    // a1是传入的参数
  }
}

3.2 传2个参数

//html
{{a1 | filterAa(a2)}}
//js
filters:{
  filterAa(a1,a2){
    // a1是传入的第一个参数
    // a2是传入的第二个参数
  }
}

3.3 传3个参数

//html
{{a1 | filterAa(a2,a3)}}
//js
filters:{
  filterAa(a1,a2,a3){
    // a1是传入的第一个参数
    // a2是传入的第二个参数
    // a3是传入的第三个参数
  }
}

3.4 传多个参数（3+）

//html
{{a1 | filterAa(a2,a3,···an···)}}
//js
filters:{
  filterAa(a1,a2,a3,···an···){
    // a1是传入的第一个参数
    // a2是传入的第二个参数
    // a3是传入的第三个参数
    
    // 以此类推    
    // an是传入的第n个参数
  }
}

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。