vue使用过滤器 filters:{}

在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法

我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了

在没有用过滤器的时候,是这样的:

<b >{{item.IssueDate}}</b>
<div><span>{{item.IssueDate}},</span><span>{{item.IssueDate}}</span></div>

下面来写我们的过滤器

filters:{
		//日期的处理(2017-05-23格式)
		getDate(val,type){
	            if(type=='y'){//年
	                return val.slice(0,4);
	            }else if(type=='m'){//月
	                 return  val.slice(5,7);
	            }else if(type=="d"){//日
	                 return  val.slice(8,10);
	            }
		}
	}

  getData()的参数val其实就是我们获取到的日期的字段item.IssueDate,那下面,我们就要修改html,加上过滤器

<b>{{item.IssueDate | getDate('d')}}</b>
<div><span>{{item.IssueDate | getDate('y')}},</span><span>{{item.IssueDate | getDate('m')}}</span></div>

这样,如果我们获取到的时间是2017-03-23,经过过滤器的处理,现在显示的就应该是23,2017,03

好啦,这样一个过滤器就完成啦

  

posted @ 2017-12-11 14:47  额爷  阅读(1825)  评论(0编辑  收藏  举报