在vue中封装一个过滤器（filters）

过滤器是一种在模板中处理数据的便捷方式，而且经常会在其他模板语言中见到。他们特别适合对字符串和数字进行简单的显示变化：例如将字符串变为正确的大小写格式，或者用更容易阅读的格式显示数字

在libs文件夹下创建filter.js文件，里面有几个常用的例子如下:

// 封装过滤器

// 根据身份证号码判断男女
let sexIdcardFilter = value => {
  if (!value) {
    return "";
  } else {
    let data = value.substr(16, 1) % 2 === 1 ? "男" : "女";
    return data;
  }
};

// 身份证号脱敏('331082199708094687' 转换成 '33108219********87') 第8位开始替换8个
let IDcardHide = num => {
  let data = num.replace(/(\d{8})\d{8}(\d*)/, "$1********$2");
  return data;
};

// 手机号脱敏('13912345678' 转换成 '139****5678') 第3位开始替换4个
let telHide = num => {
  let data = num.replace(/(\d{3})\d{4}(\d*)/, "$1****$2");
  return data;
};

// 姓名脱敏(小明 转换成 *明   李小明 转换成 李*明   欧阳小明 转换成 欧**明)
let nameHide = name => {
  if (name.length === 2) {
    return new Array(name.length).join("*") + name.substr(-1);
  } else {
    return (
      name.substr(0, 1) + new Array(name.length - 1).join("*") + name.substr(-1)
    );
  }
};

//把数字格式化为两位小数
let twoDecimals = number => {
  if (isNaN(number)) {
    return "0.00";
  } else {
    return parseFloat(number).toFixed(2);
  }
};

export default {
  sexIdcardFilter,
  IDcardHide,
  telHide,
  nameHide,
  twoDecimals
};

在main.js里面全局注册

import filter from "@/libs/filter";
// 全局导入过滤器
Object.keys(filter).forEach(key => Vue.filter(key, filter[key]));

然后在需要的地方使用即可，例子如下：

<template>
  <div class="about">
    <!-- nameHide全局过滤器 -->
    <span>{{ name }}&nbsp;{{ name | nameHide }}</span>
  </div>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      name: "留着疯"
    };
  },

效果如下：

这样使用封装函数会好很多，代码重复少，更加易读，同时可维护性也更好。过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。

可以用链式调用的方式在一个表达式中使用多个过滤器，例如：

{{productOneCost| round | formatCost}}

它会首先调用round这个过滤器，然后再调用formatCost这个过滤器。

过滤器同样可以接收参数，在下面这个例子中，输入的字符串会作为第二个参数传递给过滤器函数：

{{productOneCost| formatCost（'$'）}}

除了在插值中使用，还可以在v-bind中使用过滤器（当绑定数值到属性时）

<input type="text" :value="productOneCost| formatCost（'$'）">

使用过滤器的注意事项。过滤器是组件中唯一 不能使用this 来访问数据或者方法的地方。这一点是故意设计成这样的:因为过滤器应该是纯函数，也就是说对于同样的输人每次都返回同样的输出，而不涉及任何外部数据。如果想在过滤器中访问其他数据，可以将它作为参数传入。