<body>
<div id="app">
<select name="" id="" v-model="loginType">
<option value="username">使用户名登录</option>
<option value="email">使用邮箱登录</option>
</select>
<br>
<!-- vue在重新渲染页面时，实现条件切换渲染页面时，会尽可能少的进行DOM删除和添加 ，尽可能的重用页面已有的元素，例如if和else中元素相同但属性不同时，在切换时只修改元素的属性，而不删除，添加新元素，这叫做vue的惰性-->
<!-- 但是某些时候，惰性机制，可能会导致一些问题，页面中不想采用惰性渲染，则需要手动关闭惰性渲染。 -->
<!-- vue元素中的元素可以添加key属性，用于标记这个元素的重用类型，只要key相同元素才可以重用 -->
<input v-if="loginType=='username'" type="text" name="username" placeholder="请输入用户名" key="username" v-model="username">
<input v-else type="text" name="email" placeholder="请输入邮箱" key="email" v-model="email">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
loginType:"username",
username:"",
email:"",
}
})
</script>
</body>