vue實現用戶登錄切換

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

這篇文章主要為大家詳細介紹了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>

效果展示

存在問題

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

為什么會出現這個問題呢？

這是因為Vue在進行DOM渲染時，出于性能考慮，會盡可能的復用已經存在的元素，而不是重新創(chuàng)建新的元素。
在上面的案例中，Vue內部會發(fā)現原來的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>

效果展示