vue13-解决标签复用问题

最新推荐文章于 2023-03-16 16:38:06 发布

一笑而过者也

最新推荐文章于 2023-03-16 16:38:06 发布

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue 标签复用问题切换标签内容不清除

本文链接：https://blog.csdn.net/u012326462/article/details/82824039

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

首先看下面代码

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div v-if="show">
               用户名： <input />
            </div>
            <div v-else>
                邮箱：<input />
            </div>
        </div>


        <script>
            var vm = new Vue({
               el:"#root",
               data:{
                   show:true,
               }
            })

        </script>
    </body>
</html>

当我们再input中输入内容，然后切换show的值时，input标签做了复用，里面的内容不会清楚。解决方法，在标签中加一个key属性，表明这是唯一元素

            <!-- 切换时vue会尝试复用页面上已经存在的dom，加上一个key 表示是页面上唯一的元素，就不会复用-->
            <div v-if="show">
               用户名： <input key="username"/>
            </div>
            <div v-else>
                邮箱：<input  key="mail"/>
            </div>

一笑而过者也

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue13-解决标签复用问题

首先看下面代码&lt;!DOCTYPE html&gt;&lt;html lang=en&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Hello world&lt;/title&gt; &lt;script src="vue.js&quo
复制链接

扫一扫