vue中動(dòng)態(tài)出來(lái)返回的時(shí)間秒數(shù)(在多少秒顯示分、小時(shí)等等)
在Vue中，你可以使用計(jì)算屬性（computed property）或過(guò)濾器（filter）來(lái)根據(jù)動(dòng)態(tài)返回的時(shí)間秒數(shù)來(lái)顯示不同的時(shí)間單位，比如秒、分、小時(shí)等等。
下面是一個(gè)使用計(jì)算屬性的示例：
<template>
<div>
<p>{{ formatTime(seconds) }}</p>
</div>
</template>
<script>
export default {
data() {
return {
seconds: 12345, // 動(dòng)態(tài)返回的時(shí)間秒數(shù)
};
},
computed: {
formatTime() {
return function (seconds) {
if (seconds < 60) {
return `${seconds}秒`;
} else if (seconds < 3600) {
const minutes = Math.floor(seconds / 60);
return `${minutes}分`;
} else if (seconds < 86400) {
const hours = Math.floor(seconds / 3600);
return `${hours}小時(shí)`;
} else {
const days = Math.floor(seconds / 86400);
return `${days}天`;
}
};
},
},
};
</script>const formatTS = (seconds) => {
if (seconds < 60) {
return `${seconds}秒`;
} else if (seconds < 3600) {
const minutes = Math.floor(seconds / 60);
return `${minutes}分`;
} else if (seconds < 86400) {
const hours = Math.floor(seconds / 3600);
return `${hours}小時(shí)`;
} else {
const days = Math.floor(seconds / 86400);
return `${days}天`;
}
};示例
在上面的代碼中，我們定義了一個(gè)計(jì)算屬性??formatTime??，它接受一個(gè)參數(shù)??seconds??，根據(jù)??seconds??的值來(lái)返回相應(yīng)的時(shí)間單位。如果??seconds??小于60，返回秒；如果??seconds??小于3600，返回分；如果??seconds??小于86400，返回小時(shí)；否則返回天。
總結(jié)
到此這篇關(guān)于vue中動(dòng)態(tài)出來(lái)返回的時(shí)間秒數(shù)的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)返回時(shí)間秒數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue和React都是流行的前端框架,它們有很多相似之處,如組件化和使用虛擬DOM,但是,它們?cè)谠O(shè)計(jì)理念、組件存在形式、diff優(yōu)化和中文文檔方面存在一些不同,這篇文章給大家介紹面試官常問(wèn)Vue和React區(qū)別,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了vue鼠標(biāo)懸停事件，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
如何使用yarn創(chuàng)建vite項(xiàng)目+vue3
這篇文章主要介紹了如何使用yarn創(chuàng)建vite項(xiàng)目+vue3,詳細(xì)介紹了使用vite創(chuàng)建vue3過(guò)程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過(guò)打包輸出,靜態(tài)文件的訪問(wèn)路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue3中的onMounted生命周期鉤子,它在組件掛載到DOM后執(zhí)行代碼,onMounted只調(diào)用一次,適合進(jìn)行異步操作、DOM操作和事件監(jiān)聽,在使用時(shí)需要注意組件銷毀和響應(yīng)式數(shù)據(jù)的管理,需要的朋友可以參考下2024-11-11
Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件的實(shí)例代碼,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vuejs實(shí)現(xiàn)遞歸樹型菜單組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue項(xiàng)目在運(yùn)行npm run build時(shí)卡住不動(dòng)問(wèn)題及解決方案
這篇文章主要介紹了vue項(xiàng)目在運(yùn)行npm run build時(shí)卡住不動(dòng)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
最近學(xué)習(xí)vue.js有一段時(shí)間了，使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，所以今天寫出來(lái)和大家一起分享。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12