Vue自定义过滤器

1.时间过滤器

2017-8-22

Vue.filter('time', function (value) {
if (value=='') {
return;
}
var data = new Date(parseInt(value) * 1000)
var year = data.getFullYear()
var month = data.getMonth()+1
var day = data.getDate()
month = month<10?'0'+month:month
day = day<10?'0'+day:day
var formatDate = year +'-' +month+'-' + day
if (formatDate=='NaN-NaN-NaN') {
formatDate = '0000-00-00'
}
return formatDate
});

2017-8-22 12:00

Vue.filter('delaytime', function (value) {
if (value=='') {
return;
}
var data = new Date(parseInt(value) * 1000);
var year = data.getFullYear();
var month = data.getMonth()+1;
var day = data.getDate();
var hour = data.getHours();
var minute = data.getMinutes();
// var second = data.getSeconds();
month = month<10?'0'+month:month;
day = day<10?'0'+day:day;
hour = hour<10?'0'+hour:hour;
minute = minute<10?'0'+minute:minute;
// second = second<10?'0'+second:second;
// var formatDate = year +'-' +month+'-' + day + ' ' + hour + ':' + minute + ':' + second;
var formatDate = year +'-' +month+'-' + day + ' ' + hour + ':' + minute;
if (formatDate=='NaN-NaN-NaN NaN:NaN') {
formatDate = '0000-00-00'
}
return formatDate
});

//月日  8月22日
Vue.filter('date', function (value) {
var dd = new Date(value);
var date = dd.getMonth()+1+"月"+dd.getDate()+"日";
return date;
});

//小时分钟 12:00
Vue.filter('min', function (value) {
var dd = new Date(value);
var hour = dd.getHours();
var minute = dd.getMinutes();
var min = hour+":"+minute;
return min;
});

//星期
Vue.filter('week', function (value) {
var dd = new Date(value);
//获取当前星期X(0-6,0代表星期天)
var week = dd.getDay();
switch (week) {
case 0:
week = '星期天';
break;
case 1:
week = '星期一';
break;
case 2:
week = '星期二';
break;
case 3:
week = '星期三';
break;
case 4:
week = '星期四';
break;
case 5:
week = '星期五';
break;
case 6:
week = '星期六';
break;
};
return week;
});

2.手机号验证

Vue.filter('mobimark', function (value) {
return value.replace(/(1d{1,2})dddd(d{3,4})/g, "$1****$2");
});

3.四舍五入

Vue.filter('fixed', function (value) {
var date = value.toFixed(2);
return date;
});

自带的方法：

capitalize首字母大写

|uppercase全部大写

|uppercase全部小写

|currency输出金钱以及小数点

|debounce包装处理器，让它延迟执行 x ms， 默认延迟 300ms。

| limitBy需在v-for(即数组)里面使用|filterBy需在v-for(即数组)里面使用<需要搜索的字符串>

　　　例如：　<li v-for="val in arr | limitBy 2 1">    limitBy默认是从数组的第一个元素开始显示，在这个例子中，第一个参数是多少，就会显示几条数据，第二个参数1，为数组的下标，如果将第二个参数改成arr.length-2，那么显示的将是数组最后两个元素

|orderBy需在v-for(即数组)里面使用