广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue时间转换的几种方式
  • 374
分享到

vue时间转换的几种方式

2024-04-02 19:04:59 374人浏览 安东尼
摘要

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时间转换的方式请查看下面的相关链接

--结束END--

本文标题: vue时间转换的几种方式

本文链接: https://www.lsjlt.com/news/147839.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue时间转换的几种方式
    VUE 时间转换 做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,,前端有时候从后端拿到的时间不符合标准,此时就需要转换以后再去使用,转换有两种方式,看你个人比较喜...
    99+
    2022-11-13
  • C#中时间的几种格式转换方法
    有时候我们要对C#时间进行转换,达到不同的显示效果 默认格式为:2005-6-614:33:34 如果要换成成200506,06-2005,2005-6-6或更多的该怎么办呢 我们要...
    99+
    2022-11-15
    时间 格式转换
  • vue时间转换的方式有哪些
    这篇“vue时间转换的方式有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue时间转换的方式有哪些”文章吧。VUE 时...
    99+
    2023-06-30
  • JS时间戳转换为常用时间格式的三种方式
    目录前言1、js 时间戳转日期(可直接复制)2、在main.js中创建过滤器(1)main.js中,创建过滤器将其挂载到vue上(2)页面中具体使用3、day.js(1)三种安装方式...
    99+
    2023-05-16
    js时间戳转换为时间 js时间戳转换 js怎么将时间戳换为时间
  • Python中三种时间格式转换的方法
    目录一 时间元组二 字符串与时间戳三 时间的加减用法一 时间元组 1. 时间元组和时间戳的互化 import time,datetime # 获取当前时间的时间元组 t = time...
    99+
    2023-05-18
    Python 时间格式转换 Python 时间转换
  • 详细介绍PHP时间转时间戳的几种方法
    PHP时间转时间戳是一项常用的操作,它可以将指定的时间转化为以秒为单位的时间戳。在PHP项目中,时间戳是一个非常重要的概念,它可以用于处理与时间相关的操作,如记录日志、统计时长等。在本文中,我们将介绍PHP时间转时间戳的几种方法。一、使用d...
    99+
    2023-05-14
  • js中各种时间格式的转换方法举例
    目录js 各种时间格式的转换获取时间日期转时间戳时间戳转日期附:如何判断是否为当天时间总结js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24...
    99+
    2023-05-18
    js中时间格式化转换 时间的格式怎么转换 js时间格式转换
  • vue多语言转换的几种方法总结
    目录一、静态转换使用方式二、vue-i18n按字查询替换使用总结一、静态转换 使用 Vue 插件 language-tw-loader在打包时把本地的文字转换成繁体,动态加...
    99+
    2023-02-18
    vue多语言转换 vue多语言转换方法 vue语言转换
  • vue中常见的时间格式转换
    项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1、将2020-06-27T14:20:27.000000Z 时间格式转换成 2...
    99+
    2022-11-13
  • java中获取当前时间的几种方式
    1.new Data()SimpleDateFormat simpleFormat =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String datastring=si1.format(new...
    99+
    2022-03-01
    java 当前时间 获取 方式
  • JS格式化时间的几种方法总结
    方法一 方法 //格式化时间 function format(dat){ //获取年月日,时间 var year = dat.getFullYear(); v...
    99+
    2022-11-13
  • List转换String,String转List的几种方法
    一、List转String的方法 将一个Java集合List转换为String方法比较多,可以使用String.join()、StringBuilder、Stream流等方法。下面举几个常用的示例: ...
    99+
    2023-09-23
    list 数据结构 java
  • C++类型转换引入了那几种方式
    这期内容当中小编将会给大家带来有关C++类型转换引入了那几种方式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。众所周知C++关于类型转换引入了四种方式:static_castconst_castdynam...
    99+
    2023-06-15
  • Vue组件间通信有哪几种方式
    这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式?Vue 组件间通信是面试常考的知识点...
    99+
    2022-10-19
  • Python3时间转换之时间戳转换为指定格式的日期方法详解
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在...
    99+
    2022-11-12
  • php的跳转方式有几种
    这篇文章主要介绍“php的跳转方式有几种”,在日常操作中,相信很多人在php的跳转方式有几种问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php的跳转方式有几种”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-20
  • 聊聊Vue提示框设置时间的几种方法
    Vue是一种流行的JavaScript框架,用于构建现代和交互式的Web应用程序。提示框是一个常用的UI组件,可以帮助用户在需要时快速了解信息。在Vue中,可以使用各种库和组件来创建提示框,其中包括一些具有时间参数的选项。本文将讨论Vue提...
    99+
    2023-05-14
  • python运行时间的几种方法
    最早见过手写的,类似于下面这种: import datetime def time_1(): begin = datetime.datetime.now() sum = 0 for i ...
    99+
    2022-06-04
    几种方法 时间 python
  • javascript时间转换的方法
    这篇文章给大家分享的是有关javascript时间转换的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为Jav...
    99+
    2023-06-14
  • 详谈JSON与Javabean转换的几种形式
    JSON格式的数据传递是最常用的方法之一,以下列出了常用的几种形态以及与Javabean之间的转换:String json1="{'name':'zhangsan','age':23,'interests':[{'interest':'篮球...
    99+
    2023-05-31
    javabean 转换 json
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作