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

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

一个新手
Lepaskan: 2017-10-11 10:29:39
asal
2162 orang telah melayarinya

HTML:

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

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);
      }
    }
  })
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan