vue實現用戶登錄切換

Posted on by

本文實例為大傢分享瞭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。

推薦閱讀：

    None Found