uni-app中使用过滤器filter的两种方法

uni-app中使用过滤器filter的两种方法

如何在uni-app中使用过滤器呢？相信在写项目的时候会遇到很多地方使用过滤器的，举一个最简单的例子，时间戳转换成日期展示在页面，这个应该是最常用的了。所以下面我们就分享一下在uni-app中使用过滤器的两种方法。

第一种： 全局可用的过滤器 【main.js】

Vue.filter("formatDate",(data)=>{
	const nDate=new Date(data);
	const year = nDate.getFullYear();
	const month = nDate.getMonth()+1;
	const day = nDate.getDay();
	return year +'-'+ month +'-'+ day
})

在mian.js里面添加上述内容，这里是把时间戳转成日期，这里面可以写各种需要的功能。formatDate是次过滤的名字，在页面中可以直接使用。

使用方法如下

<text> {{item.operateTime | formatDate}}</text>

第二种： 单独页面中使用的过滤器

这是定义在单独页面的过滤器，直接在JS里面添加就可以。

filters:{
	transformType(type){
		switch(type){
			case '注册&授权':
				return '../../static/icon_m_register.png'
				break;
			case '添加账单':
				return '../../static/icon_m_bill.png'
				break;
			case '委托账单':
				return '../../static/icon_m_order.png'
				break;
			case '服务完成':
				return '../../static/icon_m_order.png'
				break;
			default: 
				return '../../static/icon_m_register.png'
		}
	}
},

使用

<image :src="item.srcType | transformType"></image>

大概效果如下图所示：

uni-app里面使用过滤的的两种方法如上。有更多好用的方法可以悄悄+V， 告诉我哦。

?? 一个超火的uni-app 实战课程分享给大家：

1、《 uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码) 》 完整无秘  百度网盘

优点：

1. 云开发，讲了目前最火的云开发
2. 多端开发匹配，一次开发多端使用
3. 很多实用的方法思路，授之以鱼不如授之以渔