Vue11_input复用问题

最新推荐文章于 2022-07-08 12:50:02 发布

ParadoxLin

最新推荐文章于 2022-07-08 12:50:02 发布

阅读量220

点赞数

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/qq_41795427/article/details/109788357

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

该博客探讨了在Vue中，由于DOM复用导致的input内容保留问题。当使用v-if/v-else切换input时，输入的内容不会自动清除。原因是Vue为了性能优化，复用了已存在的DOM元素。解决方案是在input元素上添加不同的key属性，以确保每次切换时都能生成新的输入框实例。总结指出，添加不同key可在切换时清空输入，而相同key则不会清空。

摘要由CSDN通过智能技术生成

1. 案例

<body>
<div id="app">
    <span v-if = 'isUser'>
        <label for = "username">用户账号</label>
        <input type = "text" id = "username" placeholder = "用户账号">
    </span>
    <span v-else>
        <label for = "email">用户邮箱</label>
        <input type = "text" id = "email"  placeholder = "用户邮箱" >
    </span>
    <button @click = "isUser = !isUser">切换类型</button>
</div>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            isUser : true
        }
    })
</script>
</body>

运行截图：
在这里插入图片描述
点击切换按钮，能够正确进行切换操作。

但是，当我们在input框中输入内容后，再点击切换按钮时，就会发现问题了
在这里插入图片描述
当我们在用户邮箱的框中输入123后，当我们点击切换按钮，发现用户账号的输入框中123居然还在。

原因：

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

详细解释：

在vue中是通过vdom进行渲染的，当我们将第一个label以及input渲染到页面后，点击了切换按钮，这时候vdom发现我之前已经渲染了label和input，就不会再次进行渲染，而是进行一个复用操作，这是它会把包含在标签和标签中的内容进行一个替换，比如id,placeholder等，但是input框中的内容不属于这个替换的范畴。

解决办法：