vue的条件渲染

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30587025

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/feiyangyao/p/11160192.html

博客介绍了Vue的v-if、v-else-if、v-else指令，指出Vue会复用之前的元素，如显示用户名后切换显示邮箱，input会复用且值不清空。解决办法是给标签增加不同的key值，这样就不会复用元素。

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

指令：v-if,v-else-if,v-else

注意事项：vue会复用之前的元素

举例：例如下面的例子，要是先显示用户名，改变show值，再显示邮箱，但是input是复用用户名的input（值也不会清空）

解决：给标签上增加key值，只要key值不一样，就不会复用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue的条件渲染</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="show">
        用户名：<input key="uername">
      </div>
      <div v-else>
        邮箱：<input key="mail">
      </div>
    </div>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          show:true
        }
      })
    </script>
  </body>
</html>