vue笔记之过滤器

最新推荐文章于 2025-07-03 23:19:23 发布

qq_36781179

最新推荐文章于 2025-07-03 23:19:23 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/qq_36781179/article/details/82800333

本文详细介绍了如何在Vue中定义和使用全局过滤器，包括文字替换过滤器和时间格式化过滤器，展示了过滤器的灵活性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义一个Vue全局的过滤器，名字叫做msgFilter
可带有参数，需要替换的文字可以是正则也可以是字符串，可以使用多个过滤器

<p>{{ msg | msgFormat('你好')}}</p>
<p>{{ msg | msgFormat | test}}</p>
<p>{{ item.ctime | dataFormat }}</p>

Vue.filter("msgFilter",function(msg,arg){
	return msg.replace(/欢迎/g,arg);
})


Vue.filter("msgFilter",function(msg){
	return msg.replace("欢迎","你好");
})
Vue.filter('msgFormat',function(msg,arg){
	return msg + "===="
})
// 全局过滤器，进行时间的格式化
Vue.filter('dataFormat',function(dateStr,pattern="") {
	//根据给定的时间字符串，得到特定的时间
	var dt = new Date(dateStr);
	// yyyy-mm-dd
	var y = dt.getFullYear();
	var m = (dt.getMonth()+1).toString().padStart(2,'0');
	var d = dt.getDate().toString().padStart(2,'0');
					
	if(pattern.toLowerCase()==="yyyy-mm-dd"){
		return `${y}-${m}-${d}`;
	}else{
		var hh = dt.getHours().toString().padStart(2,'0');
		var mm = dt.getMinutes().toString().padStart(2,'0');
		var ss = dt.getSeconds().toString().padStart(2,'0');

		return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
	}
})

filters: { //定义私有过滤器，过滤器有两个条件 【过滤器名称和处理函数】过滤器调用的时候才用就近原则，优先调用私有过滤器
		dataFormat: function (dateStr,pattern="") {
		//根据给定的时间字符串，得到特定的时间
		var dt = new Date(dateStr);
		// yyyy-mm-dd
		var y = dt.getFullYear();
		var m = (dt.getMonth()+1).toString().padStart(2,'0');
		var d = dt.getDate().toString().padStart(2,'0');
					
		if(pattern.toLowerCase()==="yyyy-mm-dd"){
				return `${y}-${m}-${d}`;
		}else{
				var hh = dt.getHours().toString().padStart(2,'0');
				var mm = dt.getMinutes().toString().padStart(2,'0');
				var ss = dt.getSeconds().toString().padStart(2,'0');

				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
		}
	}
},