示例代码：
<div id="app"> <!-- 这里涉及到Vue的虚拟Dom，在输入框输入的内容点击切换时，输入框内容还在，要想不复用，可以加个key，key一样复用，不一样不复用 --> <!-- 为v-if设置flag值，当其为true时显示账号登陆 --> <span v-if="flag"> <label for="username">用户账号：</label> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <!-- 为v-else设置flag值，当其为true时显示邮箱登陆 --> <span v-else> <label for="email">邮箱地址：</label> <input type="text" id="email" placeholder="邮箱地址" key="email"> </span> <button @click="change">切换登录</button> </div> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World', flag: true, }, methods: { change() { // 更改当前的flag值取反，实现切换方式 this.flag = !this.flag; } } }); </script>运行结果： 点击切换按钮： 由于给输入框设置了key的值，因此输入的内容不会复用：即再账号登陆界面输入的账号信息，再点击切换时，输入框内不会保留之前输入的值。这里涉及到虚拟DOM的知识点：
在vue中，由于存在虚拟DOM这一概念，当页面显示用户账号登陆的div时，在虚拟DOM中就已经对界面进行了渲染，当点击切换登录按钮时，虚拟DOM并不会立即重新创建一个div进行渲染，而是查看在虚拟DOM中是否有可复用的现成的已经渲染好的标签，在上述代码中，由于input输入框是两个div共有的，按钮也是两个div共有的，因此在虚拟DOM中不会重新创建input输入框，而是对用户账号登录中的虚拟DOM进行了复用，在不加key的情况下，input输入框两者用的其实是同一个（所以不加key在上一个界面输入的值，点击切换时还会保留），若想区分开两者间的input输入框，需要为其加上一个key属性以此来区别。
