vue用户登录切换小案例(v-if和v-else的使用)

切换有问题

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号label>
            <input type="text" id="username" placeholder="用户账号">
        span>
        <span v-else>
            <label for="email">用户邮箱label>
            <input type="text" id="email" placeholder="用户邮箱">
        span>
        <button @click="isUser = !isUser">切换类型button>
    div>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
      
            el: '#app',
            data: {
      
                isUser: true
            }
        })

    script>
body>
html>

效果展示
vue用户登录切换小案例(v-if和v-else的使用)_第1张图片

存在问题

  • 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
  • 但是按道理讲,我们应该切换到另外一个input元素中了。
  • 在另一个input元素中,我们并没有输入内容。
    vue用户登录切换小案例(v-if和v-else的使用)_第2张图片

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

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

解决方案

  • 给对应的input添加key
  • 保证key的不同

完美版登录小案例

input里面添加不同的key

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号label>
            <input type="text" id="username" placeholder="用户账号" key="username">
        span>
        <span v-else>
            <label for="email">用户邮箱label>
            <input type="text" id="email" placeholder="用户邮箱" key="email">
        span>
        <button @click="isUser = !isUser">切换类型button>
    div>
    <script src="../js/vue.js">script>
    <script>
        const app = new Vue({
      
            el: '#app',
            data: {
      
                isUser: true
            }
        })

    script>
body>
html>

效果展示

vue用户登录切换小案例(v-if和v-else的使用)_第3张图片

你可能感兴趣的:(#,Vue)