vue中动态显示时间

我也是参考别人的。

  • 代码如下
export default {name: 'Preview',data() {return {timer: undefined,nowTime: new Date(),};},created() {// 要显示时间,在渲染页面之前一直调用该函数,对this.time进行赋值开启定时this.timer = setInterval(() => {//时间格式1//this.nowTime = new Date().toLocaleString();//时间格式2this.nowTime = this.FormatTime();});},// 关闭页面销毁定时器beforeDestroy() {if (this.timer) {clearInterval(this.timer);}},methods: {FormatTime() {//设置返回显示的日期时间格式var date    = new Date();var year    = this.format2Digit(date.getFullYear());var month   = this.format2Digit(date.getMonth() + 1);var day     = this.format2Digit(date.getDate());var hour    = this.format2Digit(date.getHours());var minute  = this.format2Digit(date.getMinutes());var second  = this.format2Digit(date.getSeconds());var weekday = date.getDay();var weeks   = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");var week = weeks[weekday];//这里设置你要显示的格式return `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${week}`;},format2Digit(n) {//判断时间是否需要加0if (n < 10) {return "0" + n;} else {return n;}},}
}
  • 显示代码
<template><div><span style="font-size: 20px" > {{nowTime}}<span></div>
</template>

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

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

相关文章

相机的内外参数标定和畸变矫正原理和代码

相机的成像过程实质上是坐标系转换。首先空间中的点坐标由世界坐标系转换到相机坐标系&#xff0c;然后将其投影到成像平面&#xff08;图像物理坐标系&#xff09;&#xff0c;最后再将成像平面上的数据转换到图像像素坐标系。但是由于透镜制造精度及组装工艺的差别会引入畸变…

【SQL】1251. 平均售价(IFNULL函数)

前述 知识点回顾&#xff1a;MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用 题目描述 leetcode题目&#xff1a;1251. 平均售价 Code select P.product_id,ifnull(round(sum(units * price) / sum(units), 2), 0) as average_price from Prices P left join UnitsS…

无痕消除笔APP好用吗?3款超实用软件分享

无痕消除笔APP好用吗&#xff1f;在日常生活中&#xff0c;无痕消除笔APP的便捷性不言而喻。无论是想要去除照片中的小瑕疵&#xff0c;还是快速修正文案中的错别字&#xff0c;这款工具都能迅速而精准地满足需求。它不仅提升了我们处理图片和文本的效率&#xff0c;还让我们的…

一个Flash编程错误标志的探析

1、问题描述 客户项目中使用的 MCU 型号是 STM32G0B1, 他们反馈在代码中尝试擦除并编程 FLASH时, 发现 FLASH 的状态寄存器显示编程错误(如图 1 所示). 问题是当前代码还没有开始擦除和编程, 怎么就有了编程错误标志了呢 ? 如果不将此错误标志清除, 后续的编程操作无法继续.客…

vue2 table 页面 + 功能 展示

首页代码 <!-- 首页展示页面 弹框展示 --> <template><div style><el-button type"text" size"small" click"dailys()">测试跳转</el-button><!-- <div class"dingwei"><a href"#…

LeetCode 面试经典150题 134.加油站

题目&#xff1a; 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数…

How to install mongodb on redhat 7.7

下载rpm: mongodb-enterprise-server-6.0.3-1.el7.x86_64.rpmmongodb-org-server-6.0.4-1.el7.x86_64.rpmmongodb-mms-6.0.9.100.20230201T2148Z.x86_64.rpm rpm -ivh mongodb-org-server-6.0.4-1.el7.x86_64.rpm rpm -ivh mongodb-mms-6.0.9.100.20230201T2148Z.x86_64.rpm …

【 Redux 】 Redux中间件的理解?常用的中间件有哪些?实现原理?

1. 是什么 中间件(Middleware)是介于应用系统和系统软件之间的一类软件&#xff0c;它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用&#xff0c;能够达到资源共享、功能共享的目的 那么如果需要支持异步操作&#xff0c;或者支持错误处理、日…

【办公类-16-07-07】“2023下学期 大班户外游戏2(有场地和无场地版,每天不同场地)”(python 排班表系列)

作品展示 背景需求&#xff1a; 2024年2月教务组发放的是“每周五天内容相同&#xff0c;两周10天内容相同”的户外游戏安排 【办公类-16-07-05】合并版“2023下学期 大班户外游戏&#xff08;有场地和无场地版&#xff0c;两周一次&#xff09;”&#xff08;python 排班表系…

css预处理器scss的使用如何全局引入

目录 scss 基本功能 1、嵌套 2、变量 $ 3、mixin 和 include 4、extend 5、import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和 mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件 项目中使用 css 预处理器&#xff0c;可以提高 cs…

Uibot6.0 (RPA财务机器人师资培训第1天 )RPA+AI、RPA基础语法

训练网站&#xff1a;泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~&#xff09; 紧接着小北之前的几篇博客&#xff0c;友友们我们即将开展新课的学习~…

InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。

一、 Stable Diffusion 模型在线使用   InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。 Stable Diffusion是目前最火的AI绘画工具之一&#xff0c;它是一个免费开源的项目。通过Stable Diffusion&#xff0c;…

Python爬取网站数据

Python爬取网站数据 前言 什么是爬虫&#xff1f; 通过编写程序&#xff0c;模拟浏览器上网&#xff0c;然后让其去互联网上抓取数据的过程 爬虫合法还是违法&#xff1f; 在法律上是不被禁止的但是也有违法风险 爬虫带来的风险可以体现在如下2方面 爬虫干扰了被访问网站…

Centos上批量压缩子目录为ZIP文件的代码

需求&#xff1a; 写一个Centos7.9的脚本完成下列需求&#xff1a; 把目录/home/backup/test的第一级子目录依次进行压缩处理&#xff0c;压缩文件的格式为ZIP格式&#xff0c;压缩文件的名字就是子目录的名字&#xff0c;压缩文件存放于目录/home/backup/vgroup000001中。 注意…

Vulnhub - Raven2

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog Raven2 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/raven-2,269/ 0x01 信息收集 Nmap扫描…

spring-boot-devtools debug SilentExitException

spring-boot-devtools debug SilentExitException&#xff1a;springboot热部署debug模式进入SilentExitException /** Copyright 2012-2019 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use …

软考网工学习笔记(6) 广域通信网

公共交换电话网&#xff08;pstn&#xff09; 在pstn是为了语音通信而建立的网络。从20世纪60你年代开始用于数据传输 电话网有三个部分组成&#xff1a; 本地回路 &#xff0c;干线 和 交换机 。 干线 和 交换机 一般采用数字传输和交换技术 &#xff0c;而 本地回路基本采…

Ubutun部署docker,并使用docker部署springboot项目,关闭软件可继续访问

工具为xftp和xshell。 我这里使用的Ubuntu的版本是20.04的&#xff0c;话不多说&#xff0c;我们来直接上代码。 首先我们最好使用管理员权限进行操作&#xff0c;预防操作时遇到权限问题。 部署docker 登入管理员 不登入管理员也没关系。 su根据提示输入密码&#xff0c;进…

通过Docker安装MySQL数据库

1. 安装Docker 首先&#xff0c;确保你的系统上已经安装了Docker。如果还没有安装&#xff0c;可以访问Docker官网查看安装指南。 对于大多数Linux发行版&#xff0c;可以使用以下命令安装Docker&#xff1a; sudo apt-get update sudo apt-get install docker.io 安装完成…

JVM常见启动参数

目录 内存参数设置 垃圾收集 内存溢出 其他杂项 总结 java虚拟机&#xff08;JVM&#xff09;的启动参数可以用来调整其行为、性能和资源分配。以下是一些常见的JVM启动参数&#xff1a; 内存参数设置 初始化堆内存以满足应用程序需求是最常见的与性能相关的实践之一。 …