Vue起步_v-if条件渲染中的key值问题

最新推荐文章于 2025-06-22 21:27:20 发布

原创最新推荐文章于 2025-06-22 21:27:20 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #学习笔记

Vue学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个Vue应用中的具体问题：当切换显示用户名输入框和邮箱输入框时，发现用户名输入框的内容没有被清空。原因在于Vue的DOM复用机制。文章提出了解决方案：通过为每个input元素分配一个唯一的key属性来避免这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
  <div id="app">
    <div v-if="show">
      用户名：<input />
    </div>
    <div v-else> 
      邮箱：<input />
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        show: false
      }
    })
  </script>
</body>