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

vue获取时间戳转换为日期格式代码实例

程序员文章站 2022-05-15 08:24:06
vue获取时间戳转换为日期格式。 方法一为转载黄轶老师的format方法:出处(黄轶老师github    ); // date....

vue获取时间戳转换为日期格式。

方法一为转载黄轶老师的format方法:出处(黄轶老师github    );

// date.js
export function formatdate (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);
};
<!-- **.vue -->
<template>
  <!-- time时间戳 -->
  <div>{{time | formatdate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatdate} from './common/date.js';
export default {
  filters: {
    formatdate(time) {
      var date = new date(time);
      return formatdate(date, 'yyyy-mm-dd hh:mm');
    }
  }
}
</script>

方法二为自写(在百度出的结果十个有九个是上述方法且在不想使用上述方法的情况下):

使用vue.filter

<!-- demo.vue -->
<template>
 <!-- time为时间戳 -->
 <div>{{time | formatdate}}</div>
 <!-- 结果为 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
 export default {
  data() {
   return {
    time: 1516703495241
   };
  },
  filters: {
   formatdate: 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 + ':' + s;
   }
  }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus">
 
</style>

以上所述是小编给大家介绍的vue获取时间戳转换为日期格式详解整合,希望对大家有所帮助