会出现的问题是：点击button，切换了类型，但是值却跟着过来了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" /> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" /> </span> <button @click="isUser=!isUser">切换类型</button> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript"> const app=new Vue({ el:"#app", data:{ isUser:true } }) </script> </html>vue为了节约性能，对dom进行了复用，对比dom中各个节点，替换掉一些属性，同时又保留一些东西，
写上：key属性作为标识，告诉vue允不允许进行复用
<span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" :key="1" /> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" :key="2" /> </span>