• 售前

  • 售后

热门帖子
入门百科

vue实现用户登录切换

[复制链接]
聚雅阁砚堂 显示全部楼层 发表于 2021-10-26 13:22:35 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了vue实现用户登录切换的具体代码,供大家参考,具体内容如下
切换有问题
代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <span v-if="isUser">
  10.             <label for="username">用户账号</label>
  11.             <input type="text" id="username" placeholder="用户账号">
  12.         </span>
  13.         <span v-else>
  14.             <label for="email">用户邮箱</label>
  15.             <input type="text" id="email" placeholder="用户邮箱">
  16.         </span>
  17.         <button @click="isUser = !isUser">切换类型</button>
  18.     </div>
  19.     <script src="../js/vue.js"></script>
  20.     <script>
  21.         const app = new Vue({
  22.             el: '#app',
  23.             data: {
  24.                 isUser: true
  25.             }
  26.         })
  27.     </script>
  28. </body>
  29. </html>
复制代码
结果展示

存在问题
       
  • 如果我们在有输入内容的情况下,切换了类型,我们会发现笔墨依然显示之前的输入的内容。   
  • 但是按原理讲,我们应该切换到别的一个input元素中了。   
  • 在另一个input元素中,我们并没有输入内容。

为什么会出现这个问题呢?
这是因为Vue在举行DOM渲染时,出于性能考虑,会尽大概的复用已经存在的元素,而不是重新创建新的元素。
在上面的案例中,Vue内部会发现原来的input元素不再利用,直接作为else中的input来利用了。

解决方案
       
  • 给对应的input添加key   
  • 包管key的差别
完美版登录小案例

input里面添加差别的key
代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <span v-if="isUser">
  10.             <label for="username">用户账号</label>
  11.             <input type="text" id="username" placeholder="用户账号" key="username">
  12.         </span>
  13.         <span v-else>
  14.             <label for="email">用户邮箱</label>
  15.             <input type="text" id="email" placeholder="用户邮箱" key="email">
  16.         </span>
  17.         <button @click="isUser = !isUser">切换类型</button>
  18.     </div>
  19.     <script src="../js/vue.js"></script>
  20.     <script>
  21.         const app = new Vue({
  22.             el: '#app',
  23.             data: {
  24.                 isUser: true
  25.             }
  26.         })
  27.     </script>
  28. </body>
  29. </html>
复制代码
结果展示

以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作