Vue切换类型小案例

最新推荐文章于 2023-02-18 14:24:36 发布

Spongebob_nut

最新推荐文章于 2023-02-18 14:24:36 发布

阅读量222

点赞数

分类专栏： Vue 笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45832482/article/details/109632304

版权

笔记同时被 2 个专栏收录

58 篇文章 7 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

Vue学习—切换类型小案例

介绍：点击切换类型按钮，用户账号切换为用户邮箱
样式展示：
在这里插入图片描述 `


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="username">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="email" id="email" placeholder="email">
    </span>
    <button @click="isUser=!isUser">切换类型</button>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好，上学人！！！',
        isUser: true
      }
    })
  </script>
</body>
</html>`

小问题：
如果在有内容输入的情况下，切换类型，会发现文字依然显示之前输入的内容（不是不可以），如果想切换类型之后没有之前输入的内容，应该怎么办呢？
问题解答：

这是因为Vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
解决方案：
如果不希望Vue出现类似重复利用的问题，可以给对应的input添加key，
并且需要保证key不同。

Spongebob_nut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue切换类型小案例

Vue学习—切换类型小案例介绍：点击切换类型按钮，用户账号切换为用户邮箱样式展示： ````javascript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue学习</
复制链接

扫一扫