vue实现用户登录切换-偶像资源网

本文实例为大家分享了vue实现用户登录切换的具体代码，供大家参考，具体内容如下

切换有问题

代码

<!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\" id=\"username\" placeholder=\"用户账号\">
        </span>
        <span v-else>
            <label for=\"email\">用户邮箱</label>
            <input type=\"text\" 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>

效果展示

存在问题

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案

给对应的input添加key
保证key的不同

完美版登录小案例

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\" id=\"username\" placeholder=\"用户账号\" key=\"username\">
        </span>
        <span v-else>
            <label for=\"email\">用户邮箱</label>
            <input type=\"text\" 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>

效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

vue实现用户登录切换

请登录后发表评论