美文网首页
Vue中时间日期格式化多种应用方式

Vue中时间日期格式化多种应用方式

作者: 兰觅 | 来源:发表于2020-12-30 09:45 被阅读0次

    简述

    vue项目中请求数据显示在页面,其中时间类型时显示如:

    <span>{{d.createdDate}}</span>
    

    页面渲染出来是这样的:

    2020-11-18T08:49:18.000+00:00

    此时需要格式转换,在这里提供两种方式,一是应用面少,只在当前页格式化,另一种是使用次数较多,需要进行封装应用

    一.在当前组件使用

    newsList为数据数组

      <div v-for="d in newsList" :key="d.id">
                <span>{{d.createdDate | formatTimer}}</span>
          </div>
    
     export default {
        data() {
          return {
            newsList: [],
            page: 1,
            size: 2,
            tag:'标签测试'
          }
        },
        filters: {
            formatTimer: function(value) {
              let date = new Date(value);
              let y = date.getFullYear();
              let MM = date.getMonth() + 1;
              MM = MM < 10 ? "0" + MM : MM;
              let d = date.getDate();
              d = d < 10 ? "0" + d : d;
              let h = date.getHours();
              h = h < 10 ? "0" + h : h;
              let m = date.getMinutes();
              m = m < 10 ? "0" + m : m;
              let s = date.getSeconds();
              s = s < 10 ? "0" + s : s;
              return y + "-" + MM + "-" + d + " " + h + ":" + m;
            }
          },
        methods: { },
    
      }
    

    格式化后渲染出来如下:

    2020-11-18 16:49

    二.封装后使用时间格式化

    这里提供两种方式,未格式化时间显示如下:
    方法一:time

    1581672605401

    方法二:createdDate

    2020-11-18T08:49:18.000+00:00

      <div v-for="d in newsList" :key="d.id">
              <div>{{time | fmtime}}</div>
                <span>{{d.createdDate | formatDate}}</span>
             
          </div>
    

    封装格式化时间方法
    创建一个js文件formatDate.js,内容如下:

    //方法一
    export function formatDate(val) {
        var date = new Date(Number(val)); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
        var D = date.getDate() + " ";
        var h = date.getHours() + ":";
        var m = date.getMinutes() + ":";
        var s = (date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds());
        return Y + M + D + h + m + s;
    }
    
    //方法二
    export function formatDates(date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        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);
    }
    
    
     import {formatDate,formatDates} from '@/utils/formatDate'
     export default {
        data() {
          return {
            newsList: [],
           time: "1581672605401"
            page: 1,
            size: 2,
            tag:'标签测试'
          }
        },
        created () {
          this.getNewsList()
        },
        filters: {
              //方法一
          fmtime(val) {
          return fmdata(val);
        },
          //使用封装中的方法二
          formatTime(val){
            let data=new Date(val)
            return  formatDates(data,'yyyy-MM-dd hh:mm');
          }
          },
        methods: { },
        },
    
      }
    

    2020-02-14 17:30
    2020-11-18 16:49

    相关文章

      网友评论

          本文标题:Vue中时间日期格式化多种应用方式

          本文链接:https://www.haomeiwen.com/subject/gxvcoktx.html