vue时间转换的几种方式

更新时间：2022年05月03日 13:54:27 作者：荒男

这篇文章主要介绍了vue时间转换的几种方式,需要的朋友可以参考下

VUE 时间转换

做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,，前端有时候从后端拿到的时间不符合标准，此时就需要转换以后再去使用，转换有两种方式，看你个人比较喜欢哪一种。这里已时间转换为例子

过滤器filter

全局过滤器

在main.js写入

// 时间戳过滤器
Vue.filter('dateFormat', (dataStr) => {
  var time = new Date(dataStr)

  function timeAdd0 (str) {
    if (str < 10) {
      str = '0' + str
    }
    return str
  }
  var y = time.getFullYear()
  var m = time.getMonth() + 1
  var d = time.getDate()
  var h = time.getHours()
  var mm = time.getMinutes()
  var s = time.getSeconds()
  return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
})

此时时间戳details.createTime就会变成Vue.filter的参数dataStr进行运算

局部过滤器

在vue单文件中，有filters属性，和周期函数并列，

注意，此时是filters不是filter局部一般比全局多一个s，比如components的全局和局部的区别是一样的

  created(){
  },
  filters:{
      dateFormat:function(dataStr){
        var time = new Date(dataStr)
        function timeAdd0 (str) {
          if (str < 10) {
            str = '0' + str
          }
          return str
        }
        var y = time.getFullYear()
        var m = time.getMonth() + 1
        var d = time.getDate()
        var h = time.getHours()
        var mm = time.getMinutes()
        var s = time.getSeconds()
        return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
       }
  },

使用

使用方式全局和局部都是一样的，我们只需要在过滤的数据后面加上 | 就行

<span>发布时间：{{details.createTime|dateFormat}}</span>

JS引用转换

在utils文件中建一个js，用于时间转换

export function tempToData(unixtimestamp2) {
  var unixtimestamp = new Date(unixtimestamp2)
  var year = 1900 + unixtimestamp.getYear()
  var month = '0' + (unixtimestamp.getMonth() + 1)
  var date = '0' + unixtimestamp.getDate()
  var hour = '0' + unixtimestamp.getHours()
  var minute = '0' + unixtimestamp.getMinutes()
  var second = '0' + unixtimestamp.getSeconds()
  return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) +
    ' ' + hour.substring(hour.length - 2, hour.length) + ':' +
    minute.substring(minute.length - 2, minute.length) + ':' +
    second.substring(second.length - 2, second.length)
}

此时我们使用的时候，只要把js引用，在使用就行

全局引用

在main.js引用就行

import { tempToData } from '@/utils/DataUtils'

局部引用

在对应的vue文件中引用

import { tempToData } from '@/utils/DataUtils'

使用方式

<span>{{ mTempToData(details.createTime) }}</span>

总结

两种方式各有千秋，但是我个人比较喜欢过滤器filter的使用，在学习过程中要学会举一反三

更多关于vue时间转换的方式请查看下面的相关链接

您可能感兴趣的文章:

React DOM diff 对比Vue DOM diff
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue 3.x+axios跨域方案的踩坑指南
这篇文章主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
vue3中使用router4 keepalive的问题
这篇文章主要介绍了vue3中使用router4 keepalive的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue项目中引入vue-datepicker插件的详解
这篇文章主要介绍了vue项目中引入vue-datepicker插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
实现vuex原理的示例
这篇文章主要介绍了实现vuex原理的示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-10-10
vue tailwindcss安装配置教程示例详解
这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
通过一个简单的例子学会vuex与模块化
这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
Mixin混入分发Vue组件可复用功能基础示例
这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue3结合typescript中使用class封装axios
这篇文章主要为大家介绍了vue3结合typescript中使用class封装axios实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
element ui的el-input-number修改数值失效的问题及解决
这篇文章主要介绍了element ui的el-input-number修改数值失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05