<div id="app">
    <span v-if="isShow">
      <label for="useremail">邮箱登陆</label>
      <input type="text" id="useremail" placeholder="邮箱登陆">
    </span>
    
    <span v-else>
      <label for="username">账号登陆</label>
      <input type="text" id="username" placeholder="账号登陆">
    </span>
    <button @click="change">切换登陆方式</button>
  </div>

    const app = new Vue({
   
      el: '#app',
      data: {
   
        isShow: true
      },
      methods: {
   
        change() {
   
          this.isShow = !this.isShow
        }
      }
    })


从上面可以看出在切换后input中的内容还继续保留了下来
原因：vue会先生成一个虚拟dom树,虚拟dom树中只有以下

    <span v-if="isShow">
      <label for="useremail">邮箱登陆</label>
      <input type="text" id="useremail" placeholder="邮箱登陆">
    </span>

当isShow为false时虚拟dom树中并不是全部替换,只是将标签的属性更改，因此文本内容仍然存在
解决办法：
在input标签上加上key属性，而且值不同。则vue中会认为这是两个完完全全不同的input标签

  <div id="app">
    <span v-if="isShow">
      <label for="useremail">邮箱登陆</label>
      <input type="text" id="useremail" placeholder="邮箱登陆" key="1">
    </span>
    
    <span v-else>
      <label for="username">账号登陆</label>
      <input type="text" id="username" placeholder="账号登陆" key="2">
    </span>
    <button @click="change">切换登陆方式</button>
  </div>