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

**

一、自定义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>

作者:qq15577969
来源:CSDN
原文:https://blog.csdn.net/qq15577969/article/details/89157700
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值