Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >vue里面如何把时间格式化

vue里面如何把时间格式化

作者头像
GeekLiHua
发布于 2025-01-21 09:27:23
发布于 2025-01-21 09:27:23
7100
代码可运行
举报
文章被收录于专栏:JavaJava
运行总次数:0
代码可运行

vue里面如何把时间格式化

简介:本文讲解vue里面如何把时间格式化显示出来

代码演示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <div>
      <!-- 时间戳 -->
      <span>{{ timestamp }}</span>
      <br>
      <!-- 格式化后的时间 -->
      <span>{{ formattedTime }}</span>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        timestamp: "2021-06-15T00:00:00.000+00:00",
      };
    },
    computed: {
      formattedTime() {
        const date = new Date(this.timestamp);
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        const hour = ("0" + date.getHours()).slice(-2);
        const minute = ("0" + date.getMinutes()).slice(-2);
        const second = ("0" + date.getSeconds()).slice(-2);
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      },
    }
  };
  </script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-02-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue笔记2 -过滤器,v-­text ,v-­html ,v­-bind,v-on指令
Vue. 支持在{{}}插值的尾部添加一小管道符 “ | ” 对数据进行过滤, 经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。
bamboo
2019/01/29
1.4K0
vue笔记2 -过滤器,v-­text ,v-­html ,v­-bind,v-on指令
【JS实用技巧篇】03-封装思想
该篇主要是针对初学者,培养编程思想当中的——抽象思维,即能抽取关键信息,聚焦重点,而我们本篇所讲的封装思想便是这种思想的一部分,通常需要经过长期锻炼才能达到根深蒂固的程度,所以需要慢慢理解并加以实践——多敲
好吃懒洋洋
2022/11/15
2.4K0
【JS实用技巧篇】03-封装思想
写好一个函数的个人见解
在 JS 中,除了变量,用的最多的应该就是函数了,函数是 Javascript 的第一公民。
皮小蛋
2021/05/06
4840
写好一个函数的个人见解
EasyUI 时间格式化「建议收藏」
var unixTimestamp = new Date(value);
全栈程序员站长
2022/08/26
6510
nodejs时间工具类
/** * * @fmt 格式化字符串 * @Date 为需要格式化的日期 * * 示例:format(new Date(),'yyyy-MM-dd hh:mm:ss'); * 返回值为字
用户1141560
2017/12/26
1.7K0
微信小程序点击卡片跳转到对应详情
//不会的点:不知道怎么获取后端返回的链接地址值,动态的跳转到不同详情内容 //解决方案:在方法里面加参数(这就是带参数的意义)
程序媛夏天
2024/01/18
2100
微信小程序点击卡片跳转到对应详情
【HarmonyOS NEXT】systemDateTime 时间戳转换为时间格式 Date,DateTimeFormat
在鸿蒙应用开发中,经常需要将时间戳转化为标准时间格式。即:一串数字转化为年月日时分秒。
GeorgeGcs
2025/03/24
1490
发布时间格式化工具函数
本文档介绍了一套用于解析和格式化日期时间字符串的工具函数,旨在提供一种简便的方法来处理日期和时间数据,同时确保在不同设备和时区下的兼容性。
訾博ZiBo
2025/01/06
700
JavaScript Dom + 内置对象一览表
JavaScript DOM 树使用记录 一、window 对象 1.1 window 内置对象 1.2 window 事件 1.3 window 对象作为全局变量使用 二、document 对象 2.1 dom 获取标签元素 2.2 dom 标签操作 2.x 其他 dom 操作 三、JavaScript 内置对象 3.1 Object 对象 3.2 常用的 Date 对象 3.2.1 eg:获得当前的 年份,月份,天,时,分,秒,并实时刷新 3.3 Array 对象 3.3.1 创建一个数组 3.3.2
Gorit
2021/12/09
4870
js中进行数字,超大金额(千位符),日期时间格式化处理
最近遇到一个需求,对于社区里讨论的帖子展示一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示xxx万,xx亿
itclanCoder
2020/10/28
4.4K0
js中进行数字,超大金额(千位符),日期时间格式化处理
Vue 过滤器(filters)的使用、封装、批量全局定义及常用实例分享
可以用在 双花括号插值和 v-bind 表达式,其中 v-bind 从 2.1.0+ 开始支持。
德顺
2021/05/17
3.2K0
elementUI 时间格式化
2020-01-07T16:00:00.000Z 该格式是element的默认时间输出格
全栈程序员站长
2022/08/31
1.6K0
三分钟掌握Vue过滤器filters及时间戳转换
一.速识概念:    大家好呀,🚀vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法~   按照官方的活来说,Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。    简单来说就是在filters过滤器里定义一个处理函数,把函数名称写在管道符 “|” 后面,它就
玖柒的小窝
2021/09/20
1.2K0
cssjshtml vue.js 时间格式化
页面展现: 源码:  <!-- # @Time : 2018/10/13 上午12:39 # @Author : BrownWang # @Email : 277215243@qq.com # @File : vue3.html # @Software: PyCharm --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
葫芦
2019/04/17
5.2K0
消息提示时间的格式化例子(小程序)
做消息功能是,需要展示小时创建时间与当前时间的间隔, 例如: 一分钟前, 一小时前, 7-22 等
copy_left
2020/07/27
7590
Vue主页开发日记(二)
抽象的js就和main.js放在同个文件内,我这里命名为function.js,其中我写的抽象库参考如下:
诺依阁
2025/02/28
570
javascript_时间自动刷新
=========================================================
Hongten
2018/09/13
1.8K0
javascript_时间自动刷新
Calendar calendar控件的月份添加点击事件
写在前面 elementui在使用日历也就是Calendar calendar控件的时候,发现它自带的上个月、今天、下个月是没有提供点击事件的,但是博主我做业务的时候用到了,因为排班的时候想要获取到上个月的信息需要给月份的信息,所以今天记录一下解决的办法! 添加事件 在created的钩子函数中实现如下代码 this.$nextTick(() => { // 点击上个月 let prevBtn = document.querySelector('.el-calendar
何处锦绣不灰堆
2021/03/05
3.7K0
Calendar calendar控件的月份添加点击事件
Linux系统高拍仪二次开发(支持文豆高拍仪+多浏览器)FastSnap
用户11057749
2024/04/23
4010
Linux系统高拍仪二次开发(支持文豆高拍仪+多浏览器)FastSnap
时间格式处理
后端返回的字段:2021-11-18T03:44:00.968+0000 要求转换为的字段:2021年11月18日 03:44
程序媛夏天
2024/01/18
1910
相关推荐
vue笔记2 -过滤器,v-­text ,v-­html ,v­-bind,v-on指令
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验