vue中 写过的几种倒计时总结

10秒倒计时(10秒钟后内容隐藏)

<div v-if='contentShow'>
  尊敬的客户，您已进入投保流程，请您仔细阅读......
</div>
  
  data() {
    return {
      contentShow: true
    }
  },
  created() {
    let n = 10;
    let inval = setInterval(
      () => {
        if(n === 0) {
          this.contentShow = false
          clearInterval(inval)
        }else{
          n--
        }
      },
      1000
    )
  },

60秒倒计时 (短信验证码)

<div @click='getVarifyCode'>{{ varifyCodeText }}</div>
  
data() {
  return {
    varifyCodeText: '获取验证码',
    //是否已经点击过获取验证码
    isTrigger: false
  }
},
methods: {
  getVarifyCode() {
    if (this.isTrigger) return
    let n = 60;
    let inval = setInterval(
      () => {
        if(n === 0) {
          this.varifyCodeText = '重新获取验证码'
          this.isTrigger = false
          clearInterval(inval)
        }else{
          this.isTrigger = true
          this.varifyCodeText = `${n--}秒后重发`
        }
      },
      1000
    )
  }
}

10分钟倒计时（页面上展示用）
大概效果图: (10分钟后,倒计时模块从页面上移除.通过缓存实现再次点击进来,也不展示倒计时)

<div class='time-box wd-70 ht-20' v-if='timeShow'>
  <div class='ht-20 wd-28 time'>0{{ minutes}}</div>  
  <div class='ht-20 wd-14 lh-20 fs-14 t-center'>:</div>
  <div class='ht-20 wd-28 time'>{{secondsCom}}</div>
</div>
  
data() {
  return {
    minutes: 9,
    seconds: 59,
    timeShow: true,
  }
},
created(){
  this.add();
  (JSON.parse(sessionStorage.getItem("timeShow")) === 'false') ? (this.timeShow = false): (this.timeShow = true) ;
},
computed: {
  secondsCom(){
    return this.seconds < 10 ? '0'+ this.seconds : this.seconds
  },
}, 
methods: {
    // 倒计时
    add() {
      var _this = this
      var time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0
          _this.timeShow = false
          window.clearInterval(time)           
          sessionStorage.setItem("timeShow",JSON.stringify('false'));
        } else {
          _this.seconds -= 1
        }
      }, 1000)
    },
}