十二、VUE基础学习篇（key指令的使用）-清除表单元素切换遗留之前元素的内容

最新推荐文章于 2024-03-15 22:48:47 发布

IT_CREATE

最新推荐文章于 2024-03-15 22:48:47 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue中的key指令

本文链接：https://blog.youkuaiyun.com/IT_CREATE/article/details/106596736

Vue学习专栏收录该内容

13 篇文章

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（key指令的使用）

请看案例：

  <!--没有添加key的情况-->
  <p style="color: red">没有添加key的情况</p>
  <span v-if="isUser">
    <lable for="userName">用户名称</lable>
    <input type="text" id="userName" placeholder="请输入用户名">
  </span>
  <span v-else>
    <lable for="email">用户邮箱</lable>
    <input type="text" id="email" placeholder="请输入邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
  <br><br>

效果：
在这里插入图片描述
■小问题：
口如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
口但是按道理讲,我们应该切换到另外一input元素中了.
口在另一个input元素中,我们并没有输入内容.
口为什么会出现这个问题呢?
■问题解答:
口这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素，而不是重新创建新的元素
口在上面的案例中, Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了.
■解决方案:
口如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key.
口并且我们需要保证key的值不同，这样vue解析就不会复用了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击切换登录方式</title>
</head>
<body>
<div id="app">
  <!--没有添加key的情况-->
  <p style="color: red">没有添加key的情况</p>
  <span v-if="isUser">
    <lable for="userName">用户名称</lable>
    <input type="text" id="userName" placeholder="请输入用户名">
  </span>
  <span v-else>
    <lable for="email">用户邮箱</lable>
    <input type="text" id="email" placeholder="请输入邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
  <br><br>

  <!--添加了key的情况-->
  <p style="color: red">添加了key的情况</p>
  <span v-if="isUser2">
    <lable for="userName2">用户名称</lable>
    <input type="text" id="userName2" placeholder="请输入用户名" key="userName2">
  </span>
  <span v-else>
    <lable for="email2">用户邮箱</lable>
    <input type="text" id="email2" placeholder="请输入邮箱" key="email2">
  </span>
  <button @click="isUser2 = !isUser2">切换类型</button>
</div>
<!--■上面这种写法在我们点击“切换类型”按钮时，如果输入框输入了内容，在我们切换到不同的input时内容并不会被清空-->
<!--
■小问题：
  口如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
  口但是按道理讲,我们应该切换到另外一input元素中了.
  口在另一个input元素中,我们并没有输入内容.
  口为什么会出现这个问题呢?
■问题解答:
  口这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素，而不是重新创建新的元声.
  口在上面的案例中, Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了.
■解决方案:
  口如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key.
  口并且我们需要保证key的不同.
-->
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isUser: true,
      isUser2: true
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述