vue3 + ts + vite 动态显示时间

效果图如下：

vue3新写法是非常简单，代码如下：

<div>{{ getHours }}</div>

<div>{{ getMinutes }}</div>

<div>{{ getSeconds }}</div>

</div>

//获取时间

const dat = ref(new Date())

//分别获取自己需要的东西，时分秒，年月日等，这里只有时分秒

const getHours = ref(dat.value.getHours())

const getMinutes = ref(dat.value.getMinutes())

const getSeconds = ref(dat.value.getSeconds())

//最后一个定时器，解决。有个小缺陷，但是我不想改

setInterval(() => {

//秒

if (getSeconds.value == 59) {

getSeconds.value = 0

//分

if (getMinutes.value == 59) {

getMinutes.value = 0

//时

if (getHours.value == 23) {

getHours.value = 0

} else {

getHours.value += 1

}

} else {

getMinutes.value += 1

}

} else {

getSeconds.value += 1

}

}, 1000)

vue3 + ts + vite 动态显示时间相关推荐

vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
Vue3+Ts+Vite
基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目基于Vite构建项目安装配置Cesium 创建Cesium三维视图运行结果随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
vue3+ts+vite 路由详解
安装 1.首先创建项目 npm init vite@latest 输入文件名,选择Vue.TypeScript 2.vscode打开项目,安装router,less,less-loader,@type ...
【vue3 + ts + vite】找不到模块“vue”或其相应的类型声明
使用VsCode打开vite创建vue3项目的时候报出以下错误找了一大圈,不管是添加.d.ts的文件还是修改插件配置都没有解决. 后来发现只是没有@types/node声明文件包产生的问题... 1 ...
手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统
准备工作首先请确保你的node.js版本>=12.0.0 因为vite的兼容性,Vite 需要 Node.js 版本 >= 12.0.0. 如果你不知道你的node.js的版本是多少,请 ...
vue3+ts+vite自适应项目——搭建项目
系列文章目录第一章:搭建项目目录系列文章目录前言一.搭建项目二.安装sass 1.安装依赖 2.测试三.引入element-plus 1.引入库 1.1 安装 2.2引入插件 2.3测试 ...

vue3 + ts + vite 动态显示时间

vue3 + ts + vite 动态显示时间相关推荐

最新文章

热门文章