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. 很多实用的方法思路,授之以鱼不如授之以渔
站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?