vue时间转换的方式有哪些

这篇“vue时间转换的方式有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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>

以上就是关于“vue时间转换的方式有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。