vue 如何实现用户登录方式的切换

水深无声 2023-07-24 13:26 84阅读 0赞

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

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

data() { 
      return { 
        loginWay: true  
      }
    }

1.  在短信登录和密码登录上，进行动态样式绑定，`loginWay`为`true`就短信登录绑定动态样式`on`，`loginWay`为`false`就密码登录绑定动态样式`on`，并且也绑定点击事件，进行设置 `loginWay`的`true`和`false`，代码如下所示：

1.  对于短信登录和密码登录的内容，同样也设置动态样式绑定。当为`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:;">《用户服务协议》</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>

1.  显示效果如下所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/29f491963c9f40d2845e0e8cdb4f4e7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/abf59cf6a88a414096a6ec6d02603857.png