5.6过滤器

过滤器
    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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值