在MVVM的世界里，更好的选择不是依赖于框架，因为它重用了我们所看到的东西，而是使用“VM”并显式地绑定组件模板中的数据。这个想法不是尽可能多地重用DOM（实际上，我从不依赖于DOM），而是将输入值“连接”到彼此，这样无论它们是否被重用，视觉上它们总是显示相同的数据
您需要做的是在组件中定义state属性，并使用“v-model”指令将其附加到两个输入：

<template>
    <div v-if="loginType === 'username'">
        <label>Username: </label>
        <input v-model="userLogin" />
    </div>
    <div v-else>
        <label>Email: </label>
        <input v-model="userLogin" />
    </div>

    <button @click="changeLoginType()">Change Username</button>
</template>

<script>
export default {
    name: 'App',
    data: () => {
        return { loginType: 'email', userLogin: '' };
    },
    methods: {
        changeLoginType() {
            if (this.loginType === 'email') this.loginType = 'username';
            else this.loginType = 'email';
        },
    },
};
</script>

在这种情况下，无论您选择哪个选项，您的输入值总是从组件状态中取值，并且输入的更改将反映在状态中（所谓的双向数据绑定）
另外，有趣的是，当我使用Vue 3在新创建的应用程序中使用初始代码示例时--当单击按钮和更改登录类型时，输入值总是重置。因此，无论它在Vue 2中的行为如何，在新版本的Vue中，事情可能会发生变化，以前工作的代码可能会失败，因此，从长期项目支持的Angular 明确定义事情肯定更好

当使用v-for时，key属性是key，但它也有助于v-if/v-else。它防止Vue重用相同的DOM节点。
你应该试试这样的方法：

<template>
  <div>
    <label for="account">{{ loginType === 'username' ? 'Username' : 'E-mail' }}</label>
    <input id="account" v-model.trim="usernameOrEmail" :type="loginType === 'username' ? 'text' : 'email'">
  </div>
</template>

在Vue中，您必须将输入值从视图传递到模型，反之亦然（双向数据绑定），为此，您需要Vue的v-model指令。
现在，要达到这个要求，您只需将输入值绑定到一个变量，然后在changeLoginType()方法上重置/清除它。
现场演示**：**

new Vue({
  el: '#app',
  data: {
    loginType: "email",
    inputVal: ''
  },
  methods: {
    changeLoginType() {
      this.inputVal = '';
      this.loginType = this.loginType === 'email' ? 'username' : 'email';
    }
  }
})

<div id="app">
  <div v-if="loginType === 'username'">
    <label>Username: </label>
    <input v-model="inputVal"/>
  </div>
  <div v-else>
    <label>Email: </label>
    <input v-model="inputVal"/>
  </div>
  <button @click=changeLoginType>Change Username</button>
</div>