当前位置：网站首页>User login switching case

User login switching case

2022-07-27 20:56:00 【Yuzhibo Linzhong Road】

1. Definition type

1.1v-if

A small problem ：

If we have input , Switched types , We will find that the text still displays the previous input .

But logically , We should switch to another one input The elements are in .

In another input In the elements , We didn't enter anything . Why does this problem arise ？

Problem solving ：

This is because Vue It's going on DOM When rendering , For performance reasons , Reuse existing elements as much as possible , Instead of recreating new elements .

In the case above ,Vue The original will be found inside input Element is no longer used , Act directly as else Medium input To use . Solution ：

If we don't want Vue There are similar reuse problems , You can give the corresponding input add to key

And we need to make sure key Different

  <body>
    <div id="app">
      <span v-if="type=='username' ">
        <label for="username"> The account login :</label>
        <input
          type="text"
          id="username"
          placeholder=" The account login "
          key="username"
        />
      </span>
      <span v-else>
        <label for="email"> Email login :</label>
        <input type="text" id="email" placeholder=" Email login " key="email" />
      </span>
      <button @click="handleChangeType"> Switch type </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"> The account login :</label>
        <input type="text" id="username" placeholder=" The account login " />
      </span>
      <span v-show="type=='email' ">
        <label for="email"> Email login :</label>
        <input type="text" id="email" placeholder=" Email login " />
      </span>
      <button @click="handleChangeType"> Switch type </button>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        type: "username",
      },
      methods: {
        handleChangeType() {
          this.type = this.type == "username" ? "email" : "username";
        },
      },
    });
  </script>

2. Define Boolean

2.1 v-if

  <body>
    <div id="app">
      <input type="button" value=" Show login " @click="flag=true" />
      <input type="button" value=" Show registration " @click="flag=false" />
      <div v-if="flag">
        <input type="text" placeholder=" Account " /> <br />
        <input type="text" placeholder=" password " /> <br />
        <input type="button" value=" Sign in " />
      </div>
      <div v-else>
        <input type="text" placeholder=" user name " /> <br />
        <input type="text" placeholder=" Telephone " /> <br />
        <input type="button" value=" register " />
      </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=" Show login " @click="flag=true" />
      <input type="button" value=" Show registration " @click="flag=false" />
      <div v-show="flag==true">
        <input type="text" placeholder=" Account " /> <br />
        <input type="text" placeholder=" password " /> <br />
        <input type="button" value=" Sign in " />
      </div>
      <div v-show="flag == false">
        <input type="text" placeholder=" user name " /> <br />
        <input type="text" placeholder=" Telephone " /> <br />
        <input type="button" value=" register " />
      </div>
    </div>
  </body>

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

原网站

版权声明
本文为[Yuzhibo Linzhong Road]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271811594363.html