欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue日期格式化实例,根据需要转换成不同的格式

程序员文章站 2022-06-25 11:56:24
第一种方法(固定格式转换):Date.prototype.toLocaleString = function () { // 重写日期函数格式化日期 return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + th...

第一种方法(固定格式转换):

Date.prototype.toLocaleString = function () {   // 重写日期函数格式化日期
       return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()}
                 ${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes()>=10?this.getMinutes():'0'+this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;
            };

使用方法:格式化后的日期 = new Date(这里是传入的毫秒值).toLocaleString();

vue中使用


    var app = new Vue({
        el: '#app',
        data:{
            time:""
        },
        created() {
            this.time = this.dataFormat(new Date(1522611151000))

        },
        methods:{
            dataFormat(time){
                return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
                     ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
             }
        }
    })

第二种方法(根据需要转成不同格式):

Vue.filter('formatTime',function(thistime,fmt='yyyy-MM-dd hh:mm:ss'){
  let $this = new Date(thistime)
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
})

使用方法:{{1595215702457 | formatTime('yyyy-MM-dd')}}

在使用日期过滤器的时候,可以根据需要的日期格式,传入不同的参数,方便灵活,

希望能帮到大家!

本文地址:https://blog.csdn.net/u011200562/article/details/107459187

相关标签: vue