快捷導(dǎo)航

vue實(shí)現(xiàn)用戶登錄切換

更新時(shí)間：2021年04月22日 11:19:19 作者：lzh~

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)用戶登錄切換的具體代碼，供大家參考，具體內(nèi)容如下

切換有問題

代碼

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

效果展示

存在問題

如果我們在有輸入內(nèi)容的情況下，切換了類型，我們會發(fā)現(xiàn)文字依然顯示之前的輸入的內(nèi)容。
但是按道理講，我們應(yīng)該切換到另外一個(gè)input元素中了。
在另一個(gè)input元素中，我們并沒有輸入內(nèi)容。

為什么會出現(xiàn)這個(gè)問題呢？

這是因?yàn)閂ue在進(jìn)行DOM渲染時(shí)，出于性能考慮，會盡可能的復(fù)用已經(jīng)存在的元素，而不是重新創(chuàng)建新的元素。
在上面的案例中，Vue內(nèi)部會發(fā)現(xiàn)原來的input元素不再使用，直接作為else中的input來使用了。

解決方案

給對應(yīng)的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>

效果展示