架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

Vue小案例:用户登录切换邮箱和用户账号

架构师小跟班 2020-04-30 前端别闹
案例:1、页面显示一个文本,一个输入框和一个按钮2、点击按钮时文本和输入提示语为“用户账号”或“邮箱地址”思路:使用vue中的条件判断语法v-if和v-else源码:<div id="app"> <

案例:

1、页面显示一个文本,一个输入框和一个按钮

2、点击按钮时文本和输入提示语为“用户账号”或“邮箱地址”

思路:

使用vue中的条件判断语法v-if和v-else

源码:

<div id="app">
  <span v-if="type === 'username'">
    <label>用户账号:</label>
    <input type="text" placeholder="请输入用户账号">
  </span>
  <span v-else>
    <label>邮箱地址:</label>
    <input type="text" placeholder="请输入邮箱地址">
  </span>
  <button @click="btnClick">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "架构师小跟班",
      type: "username"
    },
    methods: {
      btnClick() {
        this.type = this.type === 'username' ? 'email' : 'username'
      }
    }
  })
</script>

发现问题:

如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。但是按道理讲,我们应该切换到另外一个input元素中了。在另一个input元素中,我们并没有输入内容。

为什么会出现这个问题呢?

问题解答:

这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。

解决方案:

如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且我们需要保证key的不同

<div id="app">
  <span v-if="type === 'username'">
    <label>用户账号:</label>
    <input type="text" placeholder="请输入用户账号" key="username-input">
  </span>
  <span v-else>
    <label>邮箱地址:</label>
    <input type="text" placeholder="请输入邮箱地址" key="email-input">
  </span>
  <button @click="btnClick">切换类型</button>
</div>


文章评论