vue如何转换时间格式为年月日时分秒和年月日(补零)

 更新时间:2024年04月25日 11:36:58   作者:施玥喵  
这篇文章主要介绍了vue如何转换时间格式为年月日时分秒和年月日(补零),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一.vue转换时间为年月日(补零)

  datatime(value) {
	   var data = new Date(value);
	   var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
	   var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
	   this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
	   console.log( this.addForm.enter_date)
	  },

效果图

二.vue 转换时间格式 为年月日时分秒

方法一

在main.js引入 过滤器 

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

在需要的组件里

<el-table-column label="发生日期和时刻" align="center">
         <template slot-scope="scope">{{scope.row.guzhangStartTime | dateFormat}}</template>
</el-table-column>
//guzhangStartTime  是你表格数据里拿到的字段

方法二

npm i moment --save

在main.js中

//转换时间格式
import moment from 'moment/moment'
Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD';
return moment(value).format(formatString);

});

在需要的组件里

<el-table-column label="故障记录日期" align="center">
       <template slot-scope="scope">{{scope.row.guzhangjiluTime | moment}}</template>
</el-table-column>

效果图

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中使用video.js实现截图和视频录制与下载

    Vue中使用video.js实现截图和视频录制与下载

    这篇文章主要为大家详细介绍了Vue中如何使用video.js实现截图和视频录制与下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue原生满屏滚动方式

    vue原生满屏滚动方式

    这篇文章主要介绍了vue原生满屏滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue实现Base64编码与解码的代码示例

    Vue实现Base64编码与解码的代码示例

    在Web开发中,Base64编码常用于将二进制数据转换为文本字符串,以便在网络上传输,在Vue.js应用中,Base64编码广泛应用于图像的嵌入,本文将详细介绍如何在Vue.js中实现Base64编码与解码,并提供多种示例和实现思路,需要的朋友可以参考下
    2024-09-09
  • vue实现简易计算器的4种方法举例

    vue实现简易计算器的4种方法举例

    这篇文章主要给大家介绍了关于vue实现简易计算器的4种方法,文中通过代码介绍的非常详细,对大家学习或者使用vue觉有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件

    这篇文章主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 分享一个基于Ace的Markdown编辑器

    分享一个基于Ace的Markdown编辑器

    相信开发中或多或少都会有使用md的时候。那么一个简易的md编辑器显得尤为重要,如果想要在自己的项目中添加一个md编辑器,那么不妨来看看这篇文章
    2021-10-10
  • vue如何自定义按钮单选和多选

    vue如何自定义按钮单选和多选

    这篇文章主要介绍了vue如何自定义按钮单选和多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • VUE2—defineProperty和VUE3—proxy使用方式

    VUE2—defineProperty和VUE3—proxy使用方式

    Vue2和Vue3的响应式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以监听某个属性,但不能监听整个对象,且无法监听对象属性的新增和删除,Proxy可以监听整个对象,且不会修改原数据,可以监听数组的长度变化
    2025-01-01
  • vue项目在webpack2实现移动端字体自适配功能

    vue项目在webpack2实现移动端字体自适配功能

    这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • vue图片懒加载代码实现

    vue图片懒加载代码实现

    这篇文章主要给大家介绍了关于vue图片懒加载代码实现的相关资料,所谓图片懒加载是指当我们浏览页面时,只加载我们浏览器可视区的图片,向下滚动时再继续加载后面的图片,需要的朋友可以参考下
    2023-07-07

最新评论