项目中经常遇到需要对数据进行过滤，即按照自己的意愿进行格式化。比如格式化时间，数字精确到小数点后几位等等。过滤器在vue中的使用和小程序中略有不同，下面简单分享一下这两种在实践中的用法。FilterVue中的过滤器首先使用Vue中的过滤器。实践中，时间戳的过滤器封装在自己的utils.js中，方便以后复用。格式化时间戳的方法，这个方法网上有很多教程，就不赘述了。//1。格式化时间，用es6导出).substr(4-RegExp.$1.length));}leto={"M+":date.getMonth()+1,"d+":date.getDate(),"h+":date.getHours(),"m+":date.getMinutes(),"s+":日期.getSeconds()};for(letkino){if(newRegExp(`(${k})`).test(fmt)){letstr=o[k]+"";fmt=fmt.replace(RegExp.$1,RegExp.$1.length===1?str:padLeftZero(str));}}returnfmt;}//一位补0functionpadLeftZero(str){return("00"+str).substr(str.length);}//2.使用es6exportimport{formatDate}from'commonfromyourownencapsulationmethodpath/utils'//3.在组件filters中定义过滤器：{showDate(value){//1.将unix元年时间戳转换为Date对象constdate=newDate(value*1000)//2.调用formatDate格式化时间returnformatDate(date,"yy-MM-dd")}}更简单的过滤可以直接在filter中实现。最后，它可以用在mustache语法中：{{Date|showDate}}也可以用在v-bind中：过滤器用在小程序中。该小程序提供了一个WXS模块，它也应该鼓励将此类方法打包到一个文件中。WXS代码可以写在wxml文件中的标签中，也可以写在后缀名文件中的.wxs中。引用官方文档：每个.wxs文件和标签都是一个单独的模块。每个模块都有自己独立的作用域。也就是说，模块中定义的变量和函数默认是私有的，对其他模块不可见。如果一个模块想要暴露它内部的私有变量和函数，只能通过module.exports来实现。functiondateFormat(timestamp,format){if(!format){格式=“yyyy-MM-ddhh:mm:ss”;}时间戳=parseInt(时间戳*1000);varrealDate=getDate(timestamp);functiontimeFormat(num){返回num<10?'0'+num:num;}vardate=[["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()],];varregYear=getRegExp("(y+)","i");varreg1=regYear.exec(格式);如果(reg1){格式=format.replace(reg1[1],(realDate.getFullYear()+'').substring(4-reg1[1].length));}for(vari=0;i最后使用{{format.dateFormat(Date,'yy-MM-dd')}}特别为结果精确到小数点后几位的问题，在vue中可以直接执行result.toFixed(num)//num精确到filter中的位数，但是需要注意庄家的坑舍入时的算法。在这里，我还没有找到更好的直接转换结果的方法（如果有，希望好心人不吝赐教，谢谢唧唧）。为了以后方便，我也会把精确到小数点后几位的方法打包到.wxs模块中。//数值结果过滤函数priceFormat(price,number=2){varf_price=parseFloat(price)returnf_price.toFixed(number)}然后导入到.wxml中，同理使用。在.wxs中，不知道大家有没有注意到，上面给出的时间格式化方法是不一样的，因为在.wxs文件中，需要getRegExp方法来生成regexpd对象。getRegExp(pattern[,flags])参数内容为：pattern：正则表达式的内容。标志：修饰符。该字段只能包含以下字符：g：全局i：ignoreCasem：多行。我们来做点实际的，比如判断字符串中是否包含数字，如果包含则将其转换为设定的数字。functionstringFormat(string){//创建正则对象varreg=getRegExp("[0-9]");//需要判断是否包含数字，否则会报错，但不影响结果if(reg.test(string)){returnstring.replace('2019','2020')}else{returnstring}}之后也可以导出使用。以上就是我在小程序和Vue中使用过滤器的一点心得。欢迎投诉。如果有什么不对的地方，还请大家指点。
