前言

在vue项目中动态显示时间，并且按日期、时间、星期一列排列。
我们想要的是下图时间显示方法。

一、js源代码

声明变量

  export default {data() {return {timer: "", //定义一个定时器nowTime: "",}}}

获取时间

      getTime() {this.timer = setInterval(() => {let timeDate = new Date();let year = timeDate.getFullYear();let mounth = timeDate.getMonth() + 1;let day = timeDate.getDate();let hours = timeDate.getHours();hours = hours >= 10 ? hours : "0" + hours;let minutes = timeDate.getMinutes();minutes = minutes >= 10 ? minutes : "0" + minutes;let seconds = timeDate.getSeconds();seconds = seconds >= 10 ? seconds : "0" + seconds;let week = timeDate.getDay();let weekArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",];this.nowTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`}, 1000);}

其中setInterval不要忘记销毁

    beforeDestroy() {if (this.timer) {clearInterval(this.timer);}}

二、效果图

很明显我们想要的是上下结构的，输出的是一行，并不符合要求。

1.修改

修改如下：
在data中

return {timer: "", //定义一个定时器nowWeek:"", //星期nowDate: "", //日期nowTime: "", // 当前日期时间（具体到秒）}

在函数中

           this.nowDate = `${year}/${mounth}/${day}`;this.nowTime = `${hours}:${minutes}:${seconds}`;this.nowWeek =  `${weekArr[week]}`;// this.nowTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`

2.html与style的修改

将外部改成table，再在内部进行排序。

<template><div class="outer-table"><div class="inner-table"><div>{{nowDate}}</div><div>{{nowTime}}</div><div>{{nowWeek}}</div></div></div>
</template>

  .outer-table {display: table;}.inner-table {display: table-cell;vertical-align: middle;text-align: center;}

3.修改后效果图

总结

在vue项目中动态显示时间，并且按日期、时间、星期一列排列。

vue项目中动态显示时间相关推荐

如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
methods vue过滤器和_数据动态过滤技巧在 Vue 项目中的实践
这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount. rende ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
vue项目中简单进行axios封装及响应状态码提示！
import Vue from 'vue'import axios from 'axios' import { Toast,Indicator,MessageBox } from 'mint-ui'; ...
vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
vue项目中-上传图片头像并裁剪成任意大小的实现
vue项目中-上传图片头像并裁剪成任意大小的实现先看效果图: 放大缩小-翻转-查看都有的哦! 直接上代码 <el-dialog title="图片剪裁" :visible. ...

vue项目中动态显示时间

vue项目中动态显示时间

前言

一、js源代码

二、效果图

1.修改

2.html与style的修改

3.修改后效果图

总结

vue项目中动态显示时间相关推荐

最新文章

热门文章