vue 按钮button短信倒计时

vue button发送短信，五毛钱小特效

1. 效果

video效果

vue button发送短信，五毛钱小特效

img效果

2.具体实现代码 .html

<div id="root">
    <h1 ref="txt" >短信验证码倒计时</h1>
    <button ref="btn" @click="clickBtnFn" :disabled="smsDisabled">{{btnTxt}}</button>
</div>
<!-- 步骤1：引入vue库 -->
<script src="http://unpkg.zhimg.com/vue"></script>
<script>
// 步骤2：创建vue对象
const vm = new Vue({
//声明监控范围
    el: "#root",
//创建模型
    data: {
        btnTxt:'获取验证码',
        smsDisabled:false,
    },
    methods: {
        clickBtnFn(){
            this.smsDisabled = true;
            let time = 5;
            this.btnTxt = time +"秒后重新发送";
            let t = setInterval(() => {
                time--
                this.btnTxt = time +"秒后重新发送";
                if(time < 1){
                    clearInterval(t)
                    this.btnTxt ='重新获取验证码';
                    this.smsDisabled = false;
                }
            }, 1000);
        }
    },
})
</script>

留心（第六行代码）：这里使用的vue版本是vue.js v2.x