效果图
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TPB1EMJRVTycmaNBDOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLwcjN0UzMzATMwMzNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
1、先写html(相关样式自己写)
<view class="flex_row">
<view class="iconfont iconyanzhengma"></view>
<input type="text" v-model="verify" placeholder="请输入验证码" />
<view v-if="verifyShow" style="width:240upx;" @click="verifyBtn()">获取验证码</view>
<view v-else style="width:240upx;text-align: center;">{{verifyTip+'秒'}}</view>
</view>
2、js里写倒计时方法
timedown:function(num){
let that = this;
if(num == 0){
that.verifyShow = true; // 是否显示获取验证码
return clearTimeout();
}else{
that.verifyShow = false; // 是否显示获取验证码
setTimeout(function() {
that.verifyTip = num-1
that.timedown(num-1);
}, 1000);//定时每秒减一
}
},
3、调用方法(相关判断自己写)
mounted(){
this.timedown(that.verifyTip) // this.timedown(60)
},