vuejs实现倒计时

1.短信60s倒计时

代码实现 :

 a)html结构

<template>
    <div class="buttonItem">
        <input v-model="vercode" type="text" placeholder="输入验证码">
        <div class="red sendCode" @click="sendMessage">{
  {btnText}}</div>
    </div>
</template>

b)样式

<style scoped lang="scss" rel="stylesheet/scss">
    .buttonItem{
        margin:15px 10px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        border:1px solid #ddd;
        input{
            height: 45px;
            font-size: 1rem;
            padding-left:10px;
            border:0;
            outline: none;
        }
        .sendCode{
            border: 0;
            outline: none;
            background-color: #fff;
            cursor: pointer;
        }
    }

</style>

c)逻辑

<script>
    export default{
        name:'buttonItem',
        data(){
            return{
                vercode:'',
                btnDisabled:false,
                btnText:'获取验证码'
            }
        },
        methods:{
            sendMessage(){
                if(this.btnDisabled){
                    return;
                }
                this.getSecond(60);
            },
            //发送验证码
            getSecond(wait){
                let _this=this;
                let _wait = wait;
                if(wait == 0) {
                    this.btnDisabled=false;
                    this.btnText="获取验证码"
                    wait = _wait;
                } else {
                    this.btnDisabled=true;
                    this.btnText="验证码(" + wait + "s)"
                    wait--;
                    setTimeout(function() {
                            _this.getSecond(wait);
                        },
                        1000);
                }
            }
        }
    }
</script>

效果如下：

2.秒杀倒计时