• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue使用v-if、v-else的复用问题(input体现)

开发技术 开发技术 2周前 (10-11) 9次浏览
 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

 


程序员灯塔
转载请注明原文链接:vue使用v-if、v-else的复用问题(input体现)
喜欢 (0)