vue实现-年、月、日、时、分、秒、星期?

news2025/1/9 2:36:18

一、文章引导

年月日时分秒星期
script
template

二、博主简介

🌏博客首页: 春波petal
📑文章摘要:vue年月日时分秒-星期
💌春波寄语:故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。


三、文章内容

废话不多说,直接copy代码使用

在这里插入图片描述

1、template

<div class="time">
	<p>{{ time.hour > 9 ? time.hour : "0" + time.hour }}:{{time.min > 9 ? time.min : "0" + time.min}}:{{ time.seconds > 9 ? time.seconds : "0" + time.seconds }}
	</p>
	<dl>
		<dd>{{ time.days }}</dd>
		<dt>{{ time.year }}-{{time.month > 9 ? time.month : "0" + time.month}}-{{ time.day > 9 ? time.day : "0" + time.day }}
		</dt>
	</dl>
</div>

2、script

<script>
export default {
	data() {
		return {
			time: {
				year: '',
				month: '',
				day: '',
				hour: '',
				min: '',
				seconds: '',
				days: '',
			}
		}
	},
	 methods: {
	    getCurrentDate() {
	      var myDate = new Date();
	      var year = myDate.getFullYear(); //年
	      var month = myDate.getMonth() + 1; //月
	      var day = myDate.getDate(); //日
	      var hour = myDate.getHours(); //时
	      var min = myDate.getMinutes(); //分
	      var seconds = myDate.getSeconds(); //秒
	      var days = myDate.getDay();
	      switch (days) {
	        case 1:
	          days = '星期一';
	          break;
	        case 2:
	          days = '星期二';
	          break;
	        case 3:
	          days = '星期三';
	          break;
	        case 4:
	          days = '星期四';
	          break;
	        case 5:
	          days = '星期五';
	          break;
	        case 6:
	          days = '星期六';
	          break;
	        case 0:
	          days = '星期日';
	          break;
	      }
	      this.time = {
	        year,
	        month,
	        day,
	        hour,
	        min,
	        seconds,
	        days,
	      }
	    }
  	},
  	created(){
    this.getCurrentDate()
    },
    mounted() {
	 setInterval(() => {
     this.getCurrentDate()
      }, 1000)
	}
}
</script>

四、程序语录

程序员爱情观:爱情就像死循环,一旦执行就陷进去了!

本篇博客文章模板唯一版权归属©春波petal

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1373754.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安卓应用无法拉起部分机型微信支付

错误提示&#xff1a; 2024-01-11 09:01:01.878 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E register app failed for wechat app signature check failed 2024-01-11 09:01:01.879 11754-11754 MicroMsg.S...ApiImplV10 com.bm.read E s…

蔚来出手,空气悬架「悬」了

空气悬架的这把火&#xff0c;可能要被「浇灭」了。 目前&#xff0c;在乘用车赛道&#xff0c;主动悬架按照控制类型&#xff0c;主要可以分为液压悬架、空气悬架和电磁感应悬架。其中&#xff0c;空气悬架因为中国本土造车新势力的强力推动&#xff0c;在过去几年时间成为市场…

C++11教程:C++11新特性大汇总(第六部分)

C11是2011年发布的C标准&#xff0c;是C的一次重大升级。 第十二部分&#xff1a;C多文件编程 十一、C11列表初始化&#xff08;统一了初始化方式&#xff09; 我们知道&#xff0c;在 C98/03 中的对象初始化方法有很多种&#xff0c;请看下面的代码&#xff1a; //初始化列…

SpringBoot+SSM项目实战 苍穹外卖(10) Spring Task WebSocket

继续上一节的内容&#xff0c;本节学习Spring Task和WebSocket&#xff0c;并完成订单状态定时处理、来单提醒和客户催单功能。 目录 Spring Task&#xff08;cron表达式&#xff09;入门案例 订单状态定时处理WebSocket入门案例 来单提醒客户催单 Spring Task&#xff08;cron…

⭐Unity 将电脑打开的窗口画面显示在程序中

1.效果&#xff1a; 下载资源包地址&#xff1a; Unity中获取桌面窗口 2.下载uWindowCapturev1.1.2.unitypackage 放入Unity工程 3.打开Single Window场景&#xff0c;将组件UwcWindowTexture的PartialWindowTitle进行修改&#xff0c;我以腾讯会议为例 感谢大家的观看&#xf…

python爬虫实战(7)--获取it某家热榜

1. 需要的类库 import requests from bs4 import BeautifulSoup import pandas as pd2. 请求榜单 def fetch_ranking_data():url "https://m.xxx.com/rankm/" #某家response requests.get(url)if response.status_code 200:return response.contentelse:print(f…

AIGC实战——改进循环神经网络

AIGC实战——改进循环神经网络 0. 前言1. 堆叠循环网络2. 门控制循环单元3. 双向单元相关链接 0. 前言 我们已经学习了如何训练长短期记忆网络 (Long Short-Term Memory Network, LSTM) 模型&#xff0c;以学习使用给定风格生成文本&#xff0c;接下来&#xff0c;我们将学习如…

vue 登陆禁止弹出保存密码框及禁止默认填充密码

οnfοcus“this.removeAttribute(‘readonly’);” readonly 初始化为只读&#xff0c;当聚焦时去掉只读属性&#xff0c;只读可以防止浏览器自动填充。 -webkit-text-security&#xff1a;指定要使用的形状来代替文字的显示 none 无。 circle 圆圈。 disc 圆形。 square 正方…

【Python学习】Python学习12-字典

目录 【Python学习】Python学习12-字典 前言创建语法访问列表中的值修改与新增字典删除字典元素Python字典内置函数&方法参考 文章所属专区 Python学习 前言 本章节主要说明Python的字典&#xff0c;是可变的容器&#xff0c;每个字典由键值对组成用冒号隔开&#xff0c;…

ArcMap实现多行标注

地图标注是地图的重要组成部分&#xff0c;也是地理信息的重要表达方式​。ArcMap的符号化系统为我们添加地图标注提供了方便&#xff0c;但是有时我们却需要添加多行标注&#xff0c;今天我们一起来探索一下ArcMap中两行标注的实现方式​。 首先&#xff0c;我们右击目标图层…

云流量回溯的工作原理及关键功能

云计算和网络技术的快速发展为企业提供了更灵活、高效的业务运营环境&#xff0c;同时也引发了一系列网络安全挑战。在这个背景下&#xff0c;云流量回溯成为网络安全领域的一个关键技术&#xff0c;为企业提供了对网络活动的深入洞察和实时响应的能力。 一、 云流量回溯的基本…

微信小程序中路由跳转的方式有哪些?区别?

面试官&#xff1a;说说微信小程序中路由跳转的方式有哪些&#xff1f;区别&#xff1f; 一、是什么 微信小程序拥有web网页和Application共同的特征&#xff0c;我们的页面都不是孤立存在的&#xff0c;而是通过和其他页面进行交互&#xff0c;来共同完成系统的功能 在微信小…

创意天堂:25个聚焦艺术、设计和创意的网站推荐

1、即时设计 说到即时设计&#xff0c;每个人都应该熟悉它。不久前&#xff0c;即时设计开启了世界上第一个可以使用人工智能完成UI设计草案的即时设计「即时AI」大规模的内部测试也给产品设计行业带来了新的发展方向。事实上&#xff0c;对于产品设计师来说&#xff0c;即时设…

自动化测试框架pytest系列之21个命令行参数介绍(二)

第一篇 &#xff1a; 自动化测试框架pytest系列之基础概念介绍(一)-CSDN博客 接上文 3.pytest功能介绍 3.1 第一条测试用例 首先 &#xff0c;你需要编写一个登录函数&#xff0c;主要是作为被测功能&#xff0c;同时编写一个测试脚本 &#xff0c;进行测试登录功能 。 登…

ROS建图之ROS标准REP-105(官方搬运翻译+个人理解)

REP-105 是一个由 Wim Meeussen 于 2010年10月27日 创建并维护的&#xff0c;名为 "Coordinate Frames for Mobile Platforms"&#xff08;移动平台的坐标系框架&#xff09;的 ROS Enhancement Proposal&#xff08;REP&#xff09;。ROS官方教程&#xff1a;REP 10…

C盘删除的文件怎么恢复?恢复文件,4个方法!

“请问一下在c盘中删除的文件还有机会恢复吗&#xff1f;保存了一些比较重要的工作文件&#xff0c;但是在清理电脑时误删了&#xff0c;怎么恢复呢&#xff1f;” C盘作为系统盘&#xff0c;保存了很多重要的文件。有时候电脑会默认将某些文件自动保存在c盘。那么&#xff0c;…

视频监控录像服务器(中心录像服务器)功能详细介绍

目 录 一、概述 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;视频监控中心录像服务器 二、存储策略服务 &#xff08;一&#xff09;存储策略配置 1、 录入页面 2、 选择需要进行录像的视频 3、批量选择多个通道号 4、其他关键参数…

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中&#xff0c;经常需要在内核中配置某种功能&#xff0c;为了方便大家开发和学习&#xff0c;本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核&#xff0c;可以运行以下命令进行修改: cd ke…

Python类型转换,数据类型转换函数大全 与 strip()函数介绍

Python类型转换&#xff0c;数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() 函数…

前端本地覆盖资源(local override)调试

文章目录 前言一、本地替换&#xff08;local override&#xff09;能干啥&#xff1f;二、以CSDN为例 实践一波替换图片资源 总结 前言 Chrome 65 中的开发者工具将包含以下新功能&#xff1a; 本地替换 新的无障碍工具 更改标签页 新的搜索引擎优化 (SEO) 和性能审核 Perfo…