vue实现⽤户登录⽅式的切换功能
⼀、vue 实现⽤户登录⽅式的切换
在 data 当中，定义⼀个标识符 loginWay，⽤来表⽰是⽤短信登录还是密码登录，true代表短信登录，false 代表密码登录，代码如下所⽰：
data() {
return {
loginWay: true
}
}
在短信登录和密码登录上，进⾏动态样式绑定，loginWay为true就短信登录绑定动态样式on，loginWay为false就密码登录绑定动
态样式on，并且也绑定点击事件，进⾏设置 loginWay的true和false，代码如下所⽰：
手机打开svg
<h2 class="login_logo">⽤户登录</h2>
<div class="login_header_title">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: loginWay}" @click="loginWay = true">短信登录</a>  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{on: !loginWay}" @click="loginWay = false">密码登录</a> </div>
对于短信登录和密码登录的内容，同样也设置动态样式绑定。当为loginWay为true 的时候设置短信登录为on，当为loginWay为false 的时候设置密码登录为on，代码如下所⽰：
<div :class="{on: loginWay}">
<section class="login_message">
<input type="tel" maxlength="11" placeholder="⼿机号">
<button disabled="disabled" class="get_verification">获取验证码</button>
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="验证码">
</section>
<section class="login_hint">
温馨提⽰：未注册帐号的⼿机号，登录时将⾃动注册，且代表已同意
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《⽤户服务协议》</a>
</section>
</div>
<div :class="{on: !loginWay}">
<section>
<section class="login_message">
<input type="tel" maxlength="11" placeholder="⼿机/邮箱/⽤户名">
</section>
<section class="login_verification">
<input type="tel" maxlength="8" placeholder="密码">
<div class="switch_button off">
<div class="switch_circle"></div>
<span class="switch_text">...</span>
</div>
</section>
<section class="login_message">
<input type="text" maxlength="11" placeholder="验证码">
<img class="get_verification" src="./images/captcha.svg" alt="captcha">
</section>
</section>
</div>
显⽰效果如下所⽰：
总结
到此这篇关于vue 实现⽤户登录⽅式的切换功能的⽂章就介绍到这了，更多相关vue 登录⽅式切换内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。