<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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)