Vue之input复用问题

最新推荐文章于 2022-08-05 11:46:21 发布

哆梦没有口袋

最新推荐文章于 2022-08-05 11:46:21 发布

阅读量609

点赞数 1

分类专栏：前端

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

版权

当在Vue中使用input并切换时，输入的内容可能会在不同input间复用。这是由于Vue为了性能复用已有元素而非每次都创建新对象。详细解释涉及到Vue的虚拟DOM机制，即Vue检测到元素未改变时，会复用而非重新渲染。为解决此问题，可在input上添加独特的key属性确保每次切换时都有不同的key，从而避免内容复用。

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

先来看一下一段实现登录切换的小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-dev/dist/vue.js"></script>
</head>
<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 :

最低0.47元/天解锁文章

哆梦没有口袋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之input复用问题

先来看一下一段实现登录切换的小案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue-dev/dist/vue.js"></script></head><body><div id="app"&gt
复制链接

扫一扫