vue过滤器

Posted 2020-10-17 额爷

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

我从后台获取到一个时间字段，是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

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