<!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>
<h2>切换了类型，但是值却跟着过来了</h2>
</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>
