014_Vue过滤器

最新推荐文章于 2023-04-25 22:13:25 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-04-25 22:13:25 发布

阅读量130

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122880532

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 过滤器的作用是什么?

1.1. 格式化数据, 比如: 将字符串格式化为首字母大写、将日期格式化为指定的格式等等。

1.2. 自定义全局过滤器

Vue.filter("过滤器名称", function(val) {
	// 过滤器业务逻辑
});

1.3. 自定义局部过滤器

filters: {
	format: function(date, format){
		
	}
}

1.4. 过滤器的使用

<div>首字母大写: {{msg | upper}}</div>
<div>首字母小写: {{msg | lower}}</div><hr />

<div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div>

2. 过滤器例子

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过滤器</title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<div>原值: {{msg}}</div>
			<div>首字母大写: {{msg | upper}}</div>
			<div>首字母小写: {{msg | lower}}</div><hr />

			<div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 自定义全局过滤器
			Vue.filter("upper", function(val) {
      			return val.charAt(0).toUpperCase() + val.slice(1);
		    });
		    Vue.filter("lower", function(val) {
		      	return val.charAt(0).toLowerCase() + val.slice(1);
		    });

			var vm = new Vue({
				el: "#app",
				data: {
					msg: "",
					date: new Date()
				},
				// 自定义局部过滤器
				filters: {
					format: function(date, format){
						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;
					}
				}
			});
		</script>
	</body>
</html>

2.2. 效果图