vue基础知识(八)——过滤器

最新推荐文章于 2024-04-17 12:56:28 发布

一只没有感情的小杀手

最新推荐文章于 2024-04-17 12:56:28 发布

阅读量118

点赞数 1

分类专栏： Vue基础知识及实战精华文章标签： vue 过滤器

本文链接：https://blog.csdn.net/qq_40556950/article/details/105249233

版权

Vue基础知识及实战精华专栏收录该内容

24 篇文章 1 订阅

订阅专栏

过滤器

过滤器的作用是什么？
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
自定义过滤器

Vue.filter('过滤器名称',function(value){
      // 过滤器的业务使用
})

过滤器的使用

<div>{{ msg | upper }}</div>
<div>{{ msg | upper  }}</div>
<div v-bind:id="id | formatId"></div>

带参数的过滤器

Vue.filter('format',function(value,arg1){
    // value就是过滤器传递过来的参数
})

过滤器的使用

<div>{{date | format('yyyy-MM-dd')}}</div>

例子如下：

template中：
<div id="app">
		<div>
			<span>{{msg | format('yyyy-MM-dd')}}</span>
		</div>
</div>

script中：
Vue.filter('format', function(value,arg1){
			if(arg1 == 'yyyy-MM-dd'){
				var ret = '';
				ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' +  value.getDate();
			}
			return ret
		})
		var vm =new Vue({
			el:"#app",
			data:{
				date: new Date()
			},
		})

结果为：2020-4-1

上面那个过滤器有局限性，只能格式"yyyy-MM-dd"的形式。如果用别人封装好的比较完整的时间过滤器，可以任意切换格式。写上任意格式都可以！(下面这个案例主要用的就是正则匹配)

<!DOCTYPE html>
<html>
<head>
	<title>测试vue</title>
</head>
<body>
	<div id="app">
		<div>
			<span>{{date | format('yyyy-MM-dd hh:mm:ss')}}</span>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script type="text/javascript">
		Vue.filter('format', function(value,arg1){
			function dateFormate(date,format){
				if(typeof date === "string") {
					var mts = date.match(/(\/Date\((\d+)\)\/)/);
					if(mts && mts.length >= 3){
						date = parseInt(mts[2]);
					}
				}
				date = new Date(date);
				if(!date || date.toUTCString() == "Invalid Date"){
					return "";
				}
				var map = {
					"M": date.getMonth() + 1, // 月份
					"d": date.getDate(), // 日
					"h": date.getHours(), // 小时
					"m": date.getMinutes(), // 分
					"s": date.getSeconds(), // 秒
					"q": Math.floor((date.getMonth() + 3) / 3), // 季度
					"s": date.getMilliseconds() // 毫秒
				};
				format = format.replace(/([yMdhmsqS])+/g, function(all, t){
					var v = map[t];
					if(v !== undefined){
						if(all.length > 1){
							v = '0' + v;
						    v = v.substr(v.length - 2);
						}
						return v;
					} else if (t === 'y'){
						return(date.getFullYear() + '').substr(4 - all.length);
					}
					return all;	
				})
				return format;
			}
			return dateFormate(value,arg1);

		})
		var vm =new Vue({
			el:"#app",
			data:{
				date: new Date()
			},
		
		})
	</script>
</body>
</html>

结果为：2020-04-01 19:05:96