建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
怎么在vue中利用moment實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)效果
怎么在vue中利用moment實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)建站提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)，成都品牌網(wǎng)站建設(shè)，一元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，十余年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破千余家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.
vue是什么軟件
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
{{countDown(endDate)}}/*引入日期插件*/
import moment from 'moment'
export default {
data() {
return {
now: moment(),
endDate: '2019-05-07 08:20:00',
}
},
mounted() {
//定時(shí)更新當(dāng)前時(shí)間
setInterval(()=>{
this.now = moment()
},1000),
//數(shù)字前補(bǔ) 0
// num傳入的數(shù)字，n需要的字符長度
PrefixInteger(num, n) {
return (Array(n).join(0) + num).slice(-n);
}
},
computed: {
//計(jì)算屬性，返回剩余時(shí)間
countDown(){
return function(endDate) {
let m1 = this.now
let m2 = moment(endDate)
var du = moment.duration(m2 - m1, 'ms'),
hours = du.get('hours'),
mins = du.get('minutes'),
ss = du.get('seconds');
if(hours<=0 && mins<=0 && ss<=0) {
return "已超時(shí)"
}else {
return this.PrefixInteger(hours,2) + ':' + this.PrefixInteger(mins,2) + ':' + this.PrefixInteger(ss,2)
}
}
}
},
}看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
本文題目：怎么在vue中利用moment實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)效果
分享路徑：http://fisionsoft.com.cn/article/poicjs.html
