本文實例為大家分享了vue實現用戶登錄切換的具體代碼，供大家參考，具體內容如下
切換有問題
代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!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
代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!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> |
效果展示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44635198/article/details/113654813
