介绍 & lt; div 类=癷temend"比;
,& lt; p 类=癷temss"在倒计时& lt; span>{{一}}& lt;/span>天& lt; span>{{小时}}& lt;/span>时& lt; span>{{一}}& lt;/span>分& lt; span>{{二}}& lt;/span>秒& lt;/p>
& lt;/div> 数据(),{
,return {
,,:““,,//天
小时才能:““,,//时
分钟才能:““,,//分
,,第二:““,,//秒
国旗:才能,假的,
,};
},
,安装(){
,let time =, setInterval((),=祝辞,{
if 才能;(this.flag ==,真的),{
clearInterval才能(时间);
,,}
this.timeDown才能();
,},500);
},
,道具:{
,endTime: {
,,类型:字符串,
},
},
,方法:{
,timeDown (), {
const 才能;endTime =, new 日期(this.endTime);
const 才能;nowTime =, new 日期();
let 才能;leftTime =,方法((endTime.getTime(),安康;nowTime.getTime ()),/, 1000);
let 才能;d =,方法(时间/leftTime (60, 24, *, *, 60));
let 才能;h =, this.formate(方法((/leftTime (60, *, 60)), %, 24));
let 才能;m =, this.formate(方法((/leftTime 60), %, 60));
let 才能;s =, this.formate(方法(leftTime %, 60));
if 才能;(leftTime & lt;=, 0), {
this.flag =,才能正确;
美元。才能发出(“time-end");
,,}
时间=this.day 才能;d;,//天
this.hour 才能=,h,,//时
this.minute 才能=,m;//分
this.second 才能=,年代;//秒
},
甲酸,(时间),{
if 才能;(time 祝辞=,10),{
return 才能;时间;
,,},{else
return 才能,“0 ${时间}';
,,}
},
} & lt; template>
,& lt; div>
,& lt; Times : endTime=& # 39; timeEnd& # 39;祝辞& lt;/Times>
& lt;/div>大敌;
& lt;/template>
import Times 得到“@/组件/time";
export default {
,名字:“Home",
,数据(){
,return {
timeEnd才能:“2021 - 3 - 30,9:50",//结束时间(苹果手机无法解析“产生绯闻;,可以将格式改为2021/3/30)
},
,
,组件:{
,,
},
};
这期内容当中小编将会给大家带来有关使用vue怎么实现一个倒计时功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
通过父组件传入的结束时间减去当前日期得到剩余时间
1。子组件部分
2。父组件引用
上述就是小编为大家分享的使用vue怎么实现一个倒计时功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
