vue使用v-if、v-else的复用问题（input体现） 

 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() {
19         return {
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

 

posted @ 2021-10-11 22:34  问就是城北徐公  阅读(383)  评论(0)    收藏  举报