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