VUE使用day.js显示时分秒并实时更新时间效果实例
作者：Copper peas
vue.js是目前比较流行的前端框架之一,它提供了非常多的基础组件和工具库,以方便开发者快速搭建具有可重用性的web应用,下面这篇文章主要给大家介绍了关于VUE使用day.js显示时分秒并实时更新时间效果的相关资料,需要的朋友可以参考下
效果：
1.安装dayjs
npm install dayjs
2.项目中引入
import dayjs from 'dayjs'
data(){
return {
timeId: null,
weeks: ['日', '一', '二', '三', '四', '五', '六'],
day: dayjs().format('YYYY/MM/DD'),//格式化年月日
time: dayjs().add(1, 'second').format('HH:mm:ss'),
//格式化时分秒,用add方法的原因是因为
week: dayjs().day(),//获取星期几
}
},
computed: {
//获得星期几的汉字
dWeek() {
return this.weeks[this.week + 0]
}
},
mounted() {
this.timeId = setInterval(() => {
this.time = dayjs().add(1, 'second').format('HH:mm:ss');
}, 1000);
},
beforeDestroy() {
//组件销毁前清楚定时器
if (this.timeId) {
clearInterval(this.timeId)
}
},
模板中使用
<div class="time_text">{{time}}</div>t
<div class="data_text">
<span>星期{{dWeek}}</span>
<span>{{day}}</span>
</div>
示例代码
<template>
<div>
<div class="time_text">{{time}}</div>
<div class="data_text">
<span>星期{{dWeek}}</span>
<span>{{day}}</span>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
export default {
data () {
return {
timeId: null,
weeks: ['日', '一', '二', '三', '四', '五', '六'],
day: dayjs().format('YYYY/MM/DD'),//格式化年月日
time: dayjs().add(1, 'second').format('HH:mm:ss'),
//格式化时分秒,用add方法的原因是因为
week: dayjs().day(),//获取星期几
}
},
computed: {
//获得星期几的汉字
dWeek () {
return this.weeks[this.week + 0]
}
},
mounted () {
this.timeId = setInterval(() => {
this.time = dayjs().add(1, 'second').format('HH:mm:ss');
}, 1000);
},
beforeDestroy () {
//组件销毁前清楚定时器
if (this.timeId) {
clearInterval(this.timeId)
}
},
}
</script>
<style lang="scss" scoped>
//代码样式根据需要调整
</style>附：day.js 将时间转换为年月日时分秒
安装
npm install dayjs --save
想要使用的页面引入
var dayjs = require('dayjs')
var dayjsTime = dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss') // new Date() 换成自己需要转换的数据
console.log(dayjsTime) // 2019-10-12 15:19:28
总结
到此这篇关于VUE使用day.js显示时分秒并实时更新时间效果的文章就介绍到这了,更多相关VUE day.js显示时分秒内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！