Rumah  >  Artikel  >  hujung hadapan web  >  制作一个基于vue的倒计时demo

制作一个基于vue的倒计时demo

一个新手
一个新手asal
2017-10-11 10:29:392117semak imbas

HTML:

 <p id="example">
    <button @click="send">
      <span v-if="sendMsgDisabled">{{time+&#39;秒后获取&#39;}}</span>
      <span v-if="!sendMsgDisabled">send</span>
    </button>
  </p>

JS:

var vm = new Vue({
    el: &#39;#example&#39;,
    data() {      return {
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false
      }
    },
    methods: {
      send() {        let me = this;
        me.sendMsgDisabled = true;        
        let interval = window.setInterval(function() {
          if ((me.time--) <= 0) {
            me.time = 60;
            me.sendMsgDisabled = false;
            window.clearInterval(interval); //停止
          }
        }, 1000);
      }
    }
  })

Atas ialah kandungan terperinci 制作一个基于vue的倒计时demo . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn