vue 实现用户登录方式的切换功能

vue 实现用户登录方式的切换功能实现用户登录方式的切换功能

主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具

有一定的参考借鉴价值，需要的朋友可以参考下

一、一、vue 实现用户登录方式的切换实现用户登录方式的切换

在 data 当中，定义一个标识符 loginWay，用来表示是用短信登录还是密码登录，true代表短信登录，false 代表密码登录，代码

如下所示：

data() {

return {

<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>

<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="密码">

<input type="text" maxlength="11" placeholder="验证码">

<img class="get_verification" src="./images/captcha.svg" alt="captcha">

</section>

</section>

</div>

显示效果如下所示：