当前位置：网站首页>用户登录切换案例

用户登录切换案例

2022-07-27 18:12:00 【宇智波-林中路】

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>
      <span v-else>
        <label for="email">邮箱登录:</label>
        <input type="text" id="email" placeholder="邮箱登录" key="email" />
      </span>
      <button @click="handleChangeType">切换类型</button>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        type: "username",
      },
      methods: {
        handleChangeType() {
          this.type = this.type == "username" ? "email" : "username";
        },
      },
    });
  </script>

1.2.v-show

<body>
    <div id="app">
      <span v-show="type=='username' ">
        <label for="username">账户登录:</label>
        <input type="text" id="username" placeholder="账户登录" />
      </span>
      <span v-show="type=='email' ">
        <label for="email">邮箱登录:</label>
        <input type="text" id="email" placeholder="邮箱登录" />
      </span>
      <button @click="handleChangeType">切换类型</button>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        type: "username",
      },
      methods: {
        handleChangeType() {
          this.type = this.type == "username" ? "email" : "username";
        },
      },
    });
  </script>

2.定义布尔值

2.1 v-if

  <body>
    <div id="app">
      <input type="button" value="显示登录" @click="flag=true" />
      <input type="button" value="显示注册" @click="flag=false" />
      <div v-if="flag">
        <input type="text" placeholder="账户" /> <br />
        <input type="text" placeholder="密码" /> <br />
        <input type="button" value="登录" />
      </div>
      <div v-else>
        <input type="text" placeholder="用户名" /> <br />
        <input type="text" placeholder="电话" /> <br />
        <input type="button" value="注册" />
      </div>
    </div>
  </body>

 <script>
    const app = new Vue({
      el: "#app",
      data: {
        flag: true,
      },
    });
  </script>

2.2v-show

 <body>
    <div id="app">
      <input type="button" value="显示登录" @click="flag=true" />
      <input type="button" value="显示注册" @click="flag=false" />
      <div v-show="flag==true">
        <input type="text" placeholder="账户" /> <br />
        <input type="text" placeholder="密码" /> <br />
        <input type="button" value="登录" />
      </div>
      <div v-show="flag == false">
        <input type="text" placeholder="用户名" /> <br />
        <input type="text" placeholder="电话" /> <br />
        <input type="button" value="注册" />
      </div>
    </div>
  </body>

 <script>
    const app = new Vue({
      el: "#app",
      data: {
        flag: true,
      },
    });
  </script>

原网站

版权声明
本文为[宇智波-林中路]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_60830137/article/details/125522530