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>

效果展示

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。