Vue登入切換中的問題及解決
阿新 • • 發佈：2021-02-16
使用者登入切換案例
使用者在登入時，可以切換使用使用者賬號登入或者使用者郵箱登入：
類似場景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-if="isUser" 但是，這個程式碼中卻存在一些隱性的問題：
在切換前，在輸入框中輸入一些字元或者數字，在切換後卻依舊存在。
這是因為Vue在進行DOM渲染時，出於效能考慮，會盡可能的複用已經存在的元素，而不是重新建立新的元素。
在上面的案例中，Vue內部會發現原來的input元素不再使用，直接作為else中的input來使用了，也就讓原來輸入的字元或者資料保留了下來。
解決方案：
如果我們不希望Vue出現類似重複利用的問題，可以給對應的input新增key，並且我們需要保證key的不同。
<span v-if="isUser">
<label for="username">使用者賬號</label>
<input type="text" id="username" placeholder="使用者賬號" key="username-input">
</span>
<span v-else>
<label for="email">使用者郵箱</label>
<input type="text" id="email" placeholder="使用者郵箱" key="email-input">
</span>
<button @click="isUser = !isUser">切換型別</button>