过滤器是一种在模板中处理数据的便捷方式,而且经常会在其他模板语言中见到。他们特别适合对字符串和数字进行简单的显示变化:例如将字符串变为正确的大小写格式,或者用更容易阅读的格式显示数字
在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 }} {{ 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 来访问数据或者方法的地方。这一点是故意设计成这样的:因为过滤器应该是纯函数,也就是说对于同样的输人每次都返回同样的输出,而不涉及任何外部数据。如果想在过滤器中访问其他数据,可以将它作为参数传入。