Vue学习-----------------（10）登录切换的input复用问题 

<!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="isUser">
    	  	<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>

问题描述：

  • 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入内容
  • 但是按道理讲，我们应该切换到另一个input元素中了
  • 在另一个input元素中，我们并没有输入内容

问题解答：

  • 这是因为Vue在进行DOM渲染时，由于性能考虑，会尽可能复用已经存在的元素，而不是重新创建新的元素
  • 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input元素来使用了

解决方案：

  • 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
  • 并且我们需要保证key的不同
posted @ 2021-03-16 09:30  455994206  阅读(55)  评论(0)    收藏  举报