在项目中经常会碰到需要对数据进行过滤的情况，即进行自己意愿的格式化。如格式化时间，数字精确到小数点后几位等。
vue中的过滤器和小程序中过滤器使用方式有些许不一样，那么接下来我来简单分享下这两类在实践中的使用情况。
过滤器Vue中过滤器使用
首先是vue中的过滤器，在实际中对时间戳的过滤，封装到自己的utils.js里面，方便以后的复用。
格式化时间戳方法，这个方法网上很多教程，不多赘述。
//1、格式化时间，并采用es6导出
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
}
let o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + "";
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str));
}
}
return fmt;
}
// 一位以0补齐
function padLeftZero(str) {
return ("00" + str).substr(str.length);
}
//2、从自己封装方法路径采用es6导出
import {formatDate} from 'common/utils'
//3、在组件中定义过滤器
filters: {
showDate(value) {
// 1.将unix元年时间戳转换为Date对象
const date = new Date(value * 1000)
// 2.调用formatDate格式化时间
return formatDate(date, "yy-MM-dd")
}
}较简单的过滤则可以直接在filter中实现。
最后，可以在mustache语法中使用：
{{Date | showDate}}
也可以在v-bind中使用：
过滤器在小程序中使用
小程序中提供了一个WXS模块，应该也是在鼓励将这类方法进行封装到一个文件里面，WXS 代码可以编写在 wxml 文件中的
引用官方发文档：
每一个 .wxs 文件和
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
function dateFormat(timestamp, format) {
if (!format) {
format = "yyyy-MM-dd hh:mm:ss";
}
timestamp = parseInt(timestamp * 1000);
var realDate = getDate(timestamp);
function timeFormat(num) {
return num < 10 ? '0' + num : num;
}
var date = [
["M+", timeFormat(realDate.getMonth() + 1)],
["d+", timeFormat(realDate.getDate())],
["h+", timeFormat(realDate.getHours())],
["m+", timeFormat(realDate.getMinutes())],
["s+", timeFormat(realDate.getSeconds())],
["q+", Math.floor((realDate.getMonth() + 3) / 3)],
["S+", realDate.getMilliseconds()],
];
var regYear = getRegExp("(y+)", "i");
var reg1 = regYear.exec(format);
if (reg1) {
format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
}
for (var i = 0; i < date.length; i++) {
var k = date[i][0];
var v = date[i][1];
var reg2 = getRegExp("(" + k + ")").exec(format);
if (reg2) {
format = format.replace(reg2[1], reg2[1].length == 1 ?
v : ("00" + v).substring(("" + v).length));
}
}
return format;
}导出方法，此为.wxs导出方式：
module.exports = {
dateFormat: dateFormat,
}将.wxs在需要使用的.wxml中进行引入，注意需要添加module属性
最后进行使用
{{format.dateFormat(Date,'yy-MM-dd')}}
特别的
- 对于结果精确到几位小数的问题，在Vue中，可用直接在
filter中对结果进行result.toFixed(num)//num为精确位数，但四舍五入时需要小心银行家算法的坑。而在小程序里，本人暂时没找到一个较好的方式直接转化结果（如果有，希望好心人告知，谢谢，啾咪），为了之后方便，我亦将精确到几位小数的方法一并封装入.wxs模块中。
// 数字结果过滤
function priceFormat(price, number=2) {
var f_price = parseFloat(price)
return f_price.toFixed(number)
}之后按同样的方法导入.wxml使用即可。
- 在
.wxs中，不知道大家有没有注意到，上文给出的时间格式化方式是不一样的，因为在.wxs文件中，生成regexpd对象需要使用到getRegExp方法。getRegExp(pattern[ , flags])
参数内容是：
pattern: 正则表达式的内容。
flags：修饰符。该字段只能包含以下字符:
g: global
i: ignoreCase
m: multiline。还是来点实际的吧，如判断字符串中是否含有数字，有就将其转为设定的数字。
function stringFormat(string) {
// 创建正则对象
var reg = getRegExp("[0-9]");
//需要对是否含有数字进行判断，否则报错，但不影响结果
if (reg.test(string)) {
return string.replace('2019', '2020')
} else {
return string
}
}之后同样导出使用即可。
以上就是我对小程序和Vue中使用过滤器的一点点体会，欢迎吐槽，有什么不对的地方还请大牛多多指点~啾咪