vue使用v-if、v-else的複用問題（input體現）
阿新 • • 發佈：2021-10-11
1 <body> 2 3 <div id="app"> 4 <span v-if="isChoose"> 5 <label for="username">賬號登入</label> 6 <input type="text" name="" id="username" placeholder="賬號" key="zh"> 7 </span> 8 <span v-else> 9 <label for="email">郵箱登入</label> 10<input type="text" name="" id="email" placeholder="郵箱" key="yx"> 11 </span> 12 <button @click="btnClick">切換登入型別</button> 13 </div> 14 15 <script src="../ES6/vue.js"></script> 16 <script> 17 const app = new Vue({ 18 data() { 19return { 20 isChoose: true 21 } 22 }, 23 methods: { 24 btnClick() { 25 this.isChoose = !this.isChoose 26 } 27 } 28 }).$mount('#app') 29 </script> 30 </body>
通過v-if控制的兩種互斥的登入方式，在使用到input表單輸入值後，此時切換登入方式，會存在input中內容不改變 的現象
Vue出於效能的考慮，會盡可能的複用已經存在的元素，而不是建立新的元素。
這種情況下的input沒有刪除後重新建立，而是直接作為else中的input使用
想要解決這種情況，可以在input中加入key