登录小案例-切换登录方式-解决input复用问题

小码哥呀

已于 2022-02-08 14:39:52 修改

阅读量432

点赞数

分类专栏： VUE 文章标签： vue.js 前端

于 2021-11-09 10:03:32 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/121221971

版权

VUE 专栏收录该内容

62 篇文章 8 订阅

订阅专栏

1、登录小案例-切换登录方式

点击切换登录方式会在用户名登录和邮箱登录方式之间进行切换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号：</label>
      <input type="text" name="username" id="username" placeholder="请输入用户账号">
    </span>
    <span v-else>
      <label for="email">用户邮箱：</label>
      <input type="text" id="email" id="email" placeholder="请输入用户邮箱">
    </span>
    <button @click="isUser = !isUser">换种方式登录</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          isUser:true
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2、登录切换的input复用问题

在这里插入图片描述 key作为一个标识，来决定能不能在其他地方进行该标签的复用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号：</label>
      <input type="text" name="username" id="username" placeholder="请输入用户账号" key="username">
    </span>
    <span v-else>
      <label for="email">用户邮箱：</label>
      <input type="text" id="email" id="email" placeholder="请输入用户邮箱" key="email">
    </span>
    <button @click="isUser = !isUser">换种方式登录</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          isUser:true
        }
    })
</script>
</body>
</html>

小码哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录小案例-切换登录方式-解决input复用问题

<body><div id="app"> <span v-if="isUser"> <label for="username">用户账号：</label> <input type="text" name="username" id="username" placeholder="请输入用户账号" key="username"> </span> <span v-else.
复制链接

扫一扫