龙空技术网

Vue.js使用filter自定义过滤器对时间进行格式化(js原生写法)

高邮旅行 464

前言:

眼前你们对“js的filter”都比较关注,兄弟们都需要分析一些“js的filter”的相关知识。那么小编在网上网罗了一些关于“js的filter””的相关内容,希望朋友们能喜欢,你们快快来学习一下吧!

一、自定义date.js

/**

* 对Date的扩展,将 Date 转化为指定格式的String

* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符

* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)

* eg:

* "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423

* "yyyy-MM-dd E HH:mm:ss" ==> 2009-03-10 二 20:09:04

* "yyyy-MM-dd EE hh:mm:ss" ==> 2009-03-10 周二 08:09:04

* "yyyy-MM-dd EEE hh:mm:ss" ==> 2009-03-10 星期二 08:09:04

* "yyyy-M-d h:m:s.S" ==> 2006-7-2 8:9:4.18

*/

function formatDate(date, fmt) {

let o = {

'M+': date.getMonth() + 1,//月份

'd+': date.getDate(), //日

'H+': date.getHours(),//小时

"h+": date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小时

'm+': date.getMinutes(),//分

"s+": date.getSeconds(), //秒

"q+": Math.floor((date.getMonth()+3)/3), //季度

"S" : date.getMilliseconds() //毫秒

};

var week = {

"0" : "日",

"1" : "一",

"2" : "二",

"3" : "三",

"4" : "四",

"5" : "五",

"6" : "六"

};

if (/(y+)/.test(fmt)) {

fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

}

if(/(E+)/.test(fmt)){

fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "星期" : "周") : "")+week[date.getDay()+""]);

}

for (let k in o) {

if (new RegExp(`(${k})`).test(fmt)) {

let str = o[k] + '';

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));

}

}

return fmt;

};

//

function padLeftZero(str) {

return ('00' + str).substr(str.length);

}

// filter过滤器(必须先引入Vue.js)

Vue.filter('dateFormat', function (date, format='yyyy-MM-dd HH:mm:ss') {

return formatDate(date,format);

})

二、在页面中引入date.js,然后调用时间格式化过滤器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>时间格式化(Vue过滤器)</title>

<style type="text/css">

.lable{color: red;}

</style>

</head>

<body>

<!--

1. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示

注意: 并没有改变原本的数据, 可是产生新的对应的数据

2. 编码

1). 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){

// 进行一定的数据处理

return newValue

})

2). 使用过滤器

<div>{{myData | filterName}}</div>

<div>{{myData | filterName(arg)}}</div>

-->

<!--需求: 对当前时间进行指定格式显示-->

<div id="test">

<h2>显示格式化的日期时间</h2>

<p><span class="lable">原始时间:</span>{{time}}</p>

<p><span class="lable">默认格式:</span> {{time | dateFormat}}</p>

<p><span class="lable">年月日: </span>{{time | dateFormat('yyyy-MM-dd')}}</p>

<p><span class="lable">年月日 时分秒 周几:</span> {{time | dateFormat('yyyy-MM-dd hh:mm:ss EE')}}</p>

<p><span class="lable">年月日 时分秒 星期:</span> {{time | dateFormat('yyyy-MM-dd hh:mm:ss EEE')}}</p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript" src="date.js"></script>

<script>

new Vue({

el: '#test',

data: {

time: new Date()

},

mounted () {

setInterval(() => {

this.time = new Date()

}, 1000)

}

})

</script>

</body>

</html>

标签: #js的filter