Vue.js中的自定义过滤器：格式化与参数传递-优快云博客

本文链接：https://blog.youkuaiyun.com/PengK_aha/article/details/128094490

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

   2.自定义过滤器
       Vue.filter('过滤器名称', function(val){
           //过滤业务逻辑
           return val.charAt(0).toUpperCase() + val.slice(1);
       })

   3.过滤器的使用
       <div>{{msg | upper}}</div>
       <div>{{msg | upper | lower}}</div>
       <div :abc = 'msg | upper' >测试数据</div>

   4.局部过滤器
       filters: {
           upper1: function(val){
               return val.charAt(0).toUpperCase() + val.slice(1);
           }
       },

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<div>{{msg | upper}}</div>
			<div>{{msg | upper | lower}}</div>
			<div>{{msg | upper1}}</div>
			<div :abc = 'msg | upper' >测试数据</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	过滤器
	1.过滤器的作用是什么？
		格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
	
	2.自定义过滤器
		Vue.filter('过滤器名称', function(val){
			//过滤业务逻辑			
			return val.charAt(0).toUpperCase() + val.slice(1);
		})
		
	3.过滤器的使用
		<div>{{msg | upper}}</div>
		<div>{{msg | upper | lower}}</div>
		<div :abc = 'msg | upper' >测试数据</div>
	
	4.局部过滤器
		filters: {
			upper1: function(val){
				return val.charAt(0).toUpperCase() + val.slice(1);
			}
		},
	 */
	Vue.filter('upper', function(val){
		//slice(1) 从下标开始截取字符串
		return val.charAt(0).toUpperCase() + val.slice(1);
	});
	Vue.filter('lower', function(val){
		//slice(1) 从下标开始截取字符串
		return val.charAt(0).toLowerCase() + val.slice(1);
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: '',
			},
			filters: {
				upper1: function(val){
					return val.charAt(0).toUpperCase() + val.slice(1);
				}
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

5.带参数的过滤器
   Vue.filter('format', function(val, arg){
       console.log(arg);
       if(arg == 'yyyy-MM-dd'){
           var ret = '';
           ret += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
           return ret;
       }
       return val;
   });
   6.过滤器使用
   <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	5.带参数的过滤器
	Vue.filter('format', function(val, arg){
		console.log(arg);
		if(arg == 'yyyy-MM-dd'){
			var ret = '';
			ret += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
			return ret;
		}
		return val;
	});
	6.过滤器使用	
	<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
	
	 */
	// Vue.filter('format', function(val, arg){
	// 	console.log(arg);
	// 	if(arg == 'yyyy-MM-dd'){
	// 		var ret = '';
	// 		ret += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
	// 		return ret;
	// 	}
	// 	return val;
	// });
	Vue.filter('format', function(value, arg){
		function dateFormat(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 dateFormat(value, arg);
	
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 date: new Date(),
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

5.6过滤器