vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
vue動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間有兩種方法
1.可以用day.js,處理日期和時(shí)間的js庫(kù)
用法 npm install dayjs --save
引入import dayjs from 'dayjs'
然后創(chuàng)建定時(shí)器更新最新的時(shí)間
this.timeId = setInterval(()=>{ this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss'); }, 1000);
更多的詳情可以查看day.js的api
api文檔點(diǎn)這里
2.使用vue過(guò)濾器filters
<template> <el-container id="box"> {{ date | formaDate }} </el-container> </template> <script> //創(chuàng)建一個(gè)函數(shù)來(lái)增加月日時(shí)小于10在前面加0 var padaDate = function(value){ return value<10 ? '0'+value : value; }; export default { data() { return { date: new Date(), //實(shí)時(shí)時(shí)間 }; }, watch: { }, computed: {}, filters:{ //設(shè)置一個(gè)函數(shù)來(lái)進(jìn)行過(guò)濾 formaDate:function(value){ //創(chuàng)建一個(gè)時(shí)間日期對(duì)象 var date = new Date(); var year = date.getFullYear(); //存儲(chǔ)年 var month = padaDate(date.getMonth()+1); //存儲(chǔ)月份 var day = padaDate(date.getDate()); //存儲(chǔ)日期 var hours = padaDate(date.getHours()); //存儲(chǔ)時(shí) var minutes = padaDate(date.getMinutes()); //存儲(chǔ)分 var seconds = padaDate(date.getSeconds()); //存儲(chǔ)秒 //返回格式化后的日期 return year+'年'+month+'月'+day+'日'+hours+'時(shí)'+minutes+'分'+seconds+'秒'; } }, methods: { }, created() { }, mounted() { //創(chuàng)建定時(shí)器更新最新的時(shí)間 var _this = this; this.timeId = setInterval(function() { _this.sday =dayjs().format('YYYY-MM-DD HH:mm:ss'); }, 1000); this.initmap(); }, beforeDestroy: function() { //實(shí)例銷毀前青出于定時(shí)器 if (this.timeId) { clearInterval(this.timeId); } } }; </script> <style lang="scss" scoped> </style>
附:vue時(shí)間戳 獲取本地時(shí)間,實(shí)時(shí)更新
<template> <p>當(dāng)前時(shí)間:{{nowTime}}</p> </template> <script> export default{ data(){ return{ nowTime:"" } }, methods:{ getTime(){ setInterval(()=>{ //new Date() new一個(gè)data對(duì)象,當(dāng)前日期和時(shí)間 //toLocaleString() 方法可根據(jù)本地時(shí)間把 Date 對(duì)象轉(zhuǎn)換為字符串,并返回結(jié)果。 this.nowtime = new Date().toLocaleString(); },1000) } }, created(){ this.getTime(); } } </script>
總結(jié)
到此這篇關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)實(shí)時(shí)顯示時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁(yè)導(dǎo)航與左側(cè)菜單功能
這篇文章主要介紹了Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁(yè)導(dǎo)航與左側(cè)菜單功能,mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù),可以讓前端在后端接口還沒(méi)有開發(fā)出來(lái)時(shí)獨(dú)立開發(fā)。我們可以使用真實(shí)的url,mockjs可以攔截ajax請(qǐng)求,返回設(shè)定好的數(shù)據(jù)2022-09-09Vue動(dòng)態(tài)面包屑功能的實(shí)現(xiàn)方法
面包屑功能是我們?cè)陧?xiàng)目中經(jīng)常遇到的功能,今天小編使用Element-UI 進(jìn)行實(shí)現(xiàn)在vue項(xiàng)目中實(shí)現(xiàn)面包屑功能,具體實(shí)現(xiàn)方式大家跟隨小編一起學(xué)習(xí)吧2019-07-07Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦)
本篇文章主要介紹了Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue 使用axios 數(shù)據(jù)請(qǐng)求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請(qǐng)求第三方插件的使用 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架)
這篇文章主要介紹了使用兩種方式調(diào)用本地json文件(基于Vue-cli3腳手架),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-10-10vue頁(yè)面如何及時(shí)更新頁(yè)面數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vue頁(yè)面如何及時(shí)更新頁(yè)面數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)
這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn),本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法,需要的朋友可以參考一下2022-07-07Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11