原博 https://blog.csdn.net/wangqin2734/article/details/78718081
登录界面使用手机验证码注册登录很常见,VUE中实现获取验证码倒计时还是用到定时器setInterval
先上效果图
HTML部分
<div class="login_list">
<span class="login_title">短信验证码:</span>
<input class="auth_input" type="text" placeholder="输入验证码" />
/*上面两行可忽略*/
/*
* 下面两行是本次重点,通过v-show来控制该显示哪一行
* 首先显示.auth_text_blue 通过点击事件getAuthCode来获取手机验证码。
* 同时改变sendAuthCode的值,隐藏自身,显示倒计时.auth_text
*
*/
<span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码</span>
<span v-show="!sendAuthCode" cla