用户登录切换案例

宇智波-林中路

已于 2022-07-15 22:48:21 修改

阅读量194

点赞数

分类专栏： Vue.js 文章标签：前端

于 2022-07-15 09:08:57 首次发布

本文链接：https://blog.csdn.net/m0_60830137/article/details/125522530

版权

1.定义类型

1.1v-if

◼ 小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

◼ 但是按道理讲，我们应该切换到另外一个input元素中了。

◼ 在另一个input元素中，我们并没有输入内容。 ◼ 为什么会出现这个问题呢？

◼ 问题解答：

◼ 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

◼ 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。 ◼ 解决方案：

◼ 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

◼ 并且我们需要保证key的不同

  <body>
    <div id="app">
      <span v-if="type=='username' ">
        <label for="username">账户登录:</label>
        <input
          type="text"
          id="username"
          placeholder="账户登录"
          key="username"
        />
      </span>
      <