<body>
<!--修饰符-->
<div id="app">
<span v-if="isuser">
<label for="use">用户账号</label>
<input type="text" id="use">
</span>
<span v-else="!isuser">
<label for="use2">用户邮箱</label>
<input type="text" id="use2">
</span>
<button @click="isuser=!isuser">切换类型</button>
</div>
<script>
const app=new Vue({
el:‘#app‘,
data:{
isuser:true
},
methods:{
}
})
</script>
思考小问题：即交换之后里面的内容不会发生改变
vue在将dom显示在浏览器之前，需要先放在内存的v-dom虚拟dom，之后再放在浏览器上面，放的过程中会
处于性能考虑，会对不同的内容进行修改，但是对于相同的部分会直接进行保留。
<!--修饰符-->
<div id="app">
<span v-if="isuser">
<label for="use">用户账号</label>
<input type="text" id="use" key="username"><!--通过键入key的方式进行修改-->
</span>
<span v-else="!isuser">
<label for="use2">用户邮箱</label>
<input type="text" id="use2" key="user2">
</span>
<button @click="isuser=!isuser">切换类型</button>
</div>
<script>
const app=new Vue({
el:‘#app‘,
data:{
isuser:true
}
})
</script>
原文：https://www.cnblogs.com/Damocless/p/11908732.html