Vue는 SMS 인증 코드 카운트다운을 구현합니다.

php中世界最好的语言원래의: 2018-04-17 10:35:323046검색

이번에는 SMS 인증 코드 카운트다운 구현을 위해 Vue를 소개합니다. Vue가 SMS 인증 코드 카운트다운을 구현하기 위한 주의 사항 은 무엇입니까? 다음은 실제 사례입니다.

버튼에는 두 개의 스팬 태그가 있습니다.

다른 스팬이 표시됩니다. 키 코드는 카운트다운입니다.

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

 button {
  width: 100px;
  height: 50px background: pink;
 }

var vm = new Vue({
  el: '#example',
  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);
   }
  }
 })

이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!