vue倒計時：天時分秒

data數據定義

data () {
  return {
    curStartTime: '2019-07-31 08:00:00',
    day: '0',
    hour: '00',
    min: '00',
    second: '00',
  }
},

js代碼

// 倒計時
countTime () {
  // 獲取當前時間
  let date = new Date()
  let now = date.getTime()
  // 設置截止時間
  let endDate = new Date(this.curStartTime) // this.curStartTime須要倒計時的日期
  let end = endDate.getTime()
  // 時間差
  let leftTime = end - now
  // 定義變量 d,h,m,s保存倒計時的時間
  if (leftTime >= 0) {
    // 天
    this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
    // 時
    let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
    this.hour = h < 10 ? '0' + h : h
    // 分
    let m = Math.floor(leftTime / 1000 / 60 % 60)
    this.min = m < 10 ? '0' + m : m
    // 秒
    let s = Math.floor(leftTime / 1000 % 60)
    this.second = s < 10 ? '0' + s : s
  } else {
    this.day = 0
    this.hour = '00'
    this.min = '00'
    this.second = '00'
  }
  // 等於0的時候不調用
  if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
    return
  } else {
  // 遞歸每秒調用countTime方法，顯示動態時間效果,
    setTimeout(this.countTime, 1000)
  }
},　

調用

this.curStartTime = '2019-08-09'
this.countTime()

顯示

<p>倒計時：{{day}}天 {{hour}}：{{min}}：{{second}}</p>