使用定时器setInterval,在Moment.js 时间格式化插件基础上完成当前时间持续动态变化

1、引入插件

npm install moment --save

 2、js配置:当前需要使用的文件中直接引入

import moment from 'moment';

3、代码实现:定义一个变量进行回显

  3.1、dom部分

<span>    {{ timeData }} </span>

3.2、js代码

<script>
import moment from 'moment'

export default {
    data() {
        return {
            timeData: '',
        }
    },
     created() {
        this.startTime() //初始化获取时间
     },
     methods: {
        //使用定时器setInterval,每隔一秒时间就调用函数
        startTime() {
          this.times = setInterval(() => {
          this.timeData = moment().format("YYYY/MM/DD HH:mm:ss"); //当前时间 格式可根据实际情况空更改为YYYY-MM-DD
      }, 1000);
    },

      beforeDestroy() {
        clearInterval(this.times); //离开当前页面需清除定时器
      }

}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

直播获奖(live)CSP2020

描述 NOI2130 即将举行。 为了增加观赏性&#xff0c;CCF 决定逐一评出每个选手的成绩&#xff0c;并直播即时的获奖分数线。 本次竞赛的获奖率为w&#xff0c;即当前排名前w 的选手的最低成绩就是即时的分数线。 更具体地&#xff0c;若当前已评出了 p 个选手的成绩&#…

GROUP_CONCAT报错解决

有如下表 其中awardee和awardee_unit都是保存的json类型的字符串, awardee是多个人员id, awardee_unit是部门的全路径 查询时要注意转换 需要将name拼接起来合并成一行,直接 GROUP_CONCAT 会报错 百度的大部分答案是修改数据库配置去掉严格模式,如果不方便修改数据库可以这样…

力扣刷题-二叉树-最大二叉树

654.最大二叉树 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下&#xff1a; 二叉树的根是数组中的最大元素。 左子树是通过数组中最大值左边部分构造出的最大二叉树。 右子树是通过数组中最大值右边部分构造出的最大二叉树。 通过给定的数组构建最大…

Javascript学习之路:事件在页面加载和关闭时的执行顺序

&#x1f449;前言 在实际项目中&#xff0c;如果我想在打开浏览器页面加载时执行某些任务&#xff0c;比如获取当前页面的全部或部分数据&#xff0c;优先想到的事件是onload&#xff0c;当关闭页面时&#xff0c;我们也常常会使用onunload事件。但是这两个事件却有一定的局限…

图解算法数据结构-LeetBook-回溯01_机械累加器

请设计一个机械累加器&#xff0c;计算从 1、2… 一直累加到目标数值 target 的总和。注意这是一个只能进行加法操作的程序&#xff0c;不具备乘除、if-else、switch-case、for 循环、while 循环&#xff0c;及条件判断语句等高级功能。 注意&#xff1a;不能用等差数列求和公式…

多级缓存、OpenResty、Redis分布式缓存、进程缓存

目录标题 一、预期表现二、环境配置1、nginx环境2、OpenResty环境3、redis环境4、进程缓存环境 三 、主要编码工作3.1、OpenResty编码openresty/nginx/conf/nginx.conflualib/redis_common.lualualib/common.luanginx/lua/item.lua 3.2、进程缓存编码 四、结果分析4.1 初始无缓…

【KingbaseES】实现MySql函数len

原理&#xff1a;调用length函数返回到结果中 CREATE OR REPLACE FUNCTION len(input_text text) RETURNS integer AS $$ BEGIN RETURN length(input_text); END; $$ LANGUAGE plpgsql;结果如下&#xff1a;

Docker介绍、常用命令、项目部署

什么是Docker 简单说&#xff1a;Docker就是一个虚拟机&#xff0c;专业说&#xff1a;它是一个开源的容器平台。它和我们常用的VMware有很多相似的地方。 名词解释 镜像/images 由本体打包出来的文件。并不是文件本身&#xff0c;但是具有该文件的功能。举个不太贴切的例子&…

毛虫目标检测数据集VOC格式550张

毛虫&#xff0c;一种令人惊叹的生物&#xff0c;以其独特的外貌和习性&#xff0c;成为了自然界中的一道亮丽风景。 毛虫的外观非常特别&#xff0c;身体呈圆柱形&#xff0c;表面覆盖着许多细小的毛发&#xff0c;这使得它们在叶子上伪装得非常好。它们的头部有一对坚硬的颚…

【JavaSE】P1~P32 进制,字节,Java代码规范,常量,变量,运算符

目录 IDEA常用快键键和快捷用法一、需要复习的重难点概念1 进制、字节、DOS操作命令语句进制及转化字节DOS系统命令提示符 2 Java 常用代码规范3 常量及常量的打印4 变量数据类型及取值范围变量的概念和使用数据类型转换ASCII码表&#xff08;128种&#xff09;基本数据类型极其…

P1019 [NOIP2000 提高组] 单词接龙

网址如下&#xff1a;P1019 [NOIP2000 提高组] 单词接龙 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 很怪&#xff0c;不知道该说什么 我试了题目给的第一个测试点的输入&#xff0c;发现输出和测试点的一样&#xff0c;但是还是WA 不是很懂为什么 有没有大佬帮我看一下…

用 Python 抓取 bilibili 弹幕并分析!

01 实现思路 首先&#xff0c;利用哔哩哔哩的弹幕接口&#xff0c;把数据保存到本地。接着&#xff0c;对数据进行分词。最后&#xff0c;做了评论的可视化。 02 弹幕数据 平常我们在看视频时&#xff0c;弹幕是出现在视频上的。实际上在网页中&#xff0c;弹幕是被隐藏在源代码…

14.两数之和

题目 class Solution {public int[] twoSum(int[] nums, int target) {int[] ret {-1,-1};for(int i0;i<nums.length;i) {for(int ji1;j<nums.length;j) {if(nums[i] nums[j] target) {ret[0] i;ret[1] j;}}}return ret;} }

顶顶通呼叫中心中间件配置背景音乐(mod_cti基于FreeSWITCH)

介绍 配置外呼任务拨打时的背景音乐&#xff0c;一步步配置 一、配置队列外呼模板 打开ccadmin->队列呼叫模板->添加一条变量根据下方图片配置 二、上传音乐文件 后缀格式为.wav格式的声音文件&#xff0c;声音文件需要上传在这个目录&#xff1a;/ddt/fs/sounds/ct…

【编译原理】期末预习PPT前四章笔记II

看了看学校的ppt&#xff0c;记的比较随意O.o 因为我的考试范围里边没有简答所以概念什么的没怎么记 没有简答只有选择真是太好了嘿嘿嘿 目录 I. 概述&#xff08;好多字。。&#xff09; 一、高级语言的分类 1、体裁 2、执行方式 二、各种语言的执行方式 三、编译程序…

基于ssm的医院交互系统+vue论文

医院交互系统的设计与实现 摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。传统的医院交互信息管理模式&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人力为主的管理模…

CCNP课程实验-07-OSPF-Trouble-Shooting

目录 实验条件网络拓朴 环境配置开始排错错点1&#xff1a;R1-R2之间认证不匹配错误2&#xff1a;hello包的时间配置不匹配错误3&#xff1a;R2的e0/1接口区域配置不正确错误4&#xff1a;R4的e0/1接口没有配置进OSPF错误5&#xff1a;R2的区域1没有配置成特殊区域错误6&#x…

RK3568 学习笔记 : ubuntu 20.04 下 Linux-SDK 镜像烧写

前言 开发板&#xff1a;【正点原子】ATK-DLRK3568 开发板&#xff0c;编译完 Linux-SDK 后&#xff0c;生成了相关的镜像文件&#xff0c;本篇记录一下 镜像烧写&#xff0c;当前编译环境在 VMware 虚拟机中&#xff0c;虚拟机系统是 ubuntu 20.04 此次烧写还算顺利&#xff…

2024腾讯云轻量应用服务器详细介绍_轻量全解析

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器&#xff0c;CPU内存带宽配置高并且价格特别便宜&#xff0c;大带宽&#xff0c;但是限制月流量。轻量2核2G3M带宽62元一年、2核2G4M优惠价118元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;756元3年、…

pod探针

Pod进阶&#xff1a; 探针* Poststart Prestop pod的声明周期开始&#xff1a; k8s的pod重启策略&#xff1a; Always deployment的yaml三种模式都可以&#xff0c;不论正常退出还是非正常退出都重启 OnFailure:只有状态码非零才会重启&#xff0c;正常退出事不重启的 …
最新文章