<body>
<div id="app">
<h1>登入頁面</h1>
<select v-model="loginType">
<option value="com1">使用者名登入</option>
<option value="com2">郵箱登入</option>
</select>
<!-- 根據不同條件顯示不同的元件，可以通過v-if實作，但是這種方法不是最好的方法 -->
<!-- <com1 v-if="loginType=='username'"></com1>
<com2 v-if="loginType=='email'"></com2> -->
<!-- 某個元件根據條件，在不同的元件之間切換，可以使用動态元件技術 -->
<!-- component标簽是動态元件标簽，需要設定is屬性，is設定為哪個元件名，component在渲染時就會被渲染為這個元件 -->
<!-- 是以，要想實作元件的切換，隻需要将component的is屬性綁定到一個變量上，變量的值在多個元件名之間切換，就能實作元件的切換 -->
<!-- 如果希望元件切換時保留原來的元件，切回時不建立新的元件，則需要把component寫在keep-alive标簽中 -->
<keep-alive>
<component :is="loginType"></component>
</keep-alive>
</div>
</body>
<script src="vue.js"></script>
<script type="text/html" id="com1">
<div>
<label for="">使用者名</label>
<input type="text">
<br>
<label for="">密碼</label>
<input type="password">
<button>注冊</button>
</script>
<script type="text/html" id="com2">
<label for="">郵箱</label>
<script>
// 動态元件在切換時，總是銷毀舊的元件，建立新的元件。
let com1 = {
template:"#com1",
created() {
console.log("com1元件建立了");
},
mounted() {
console.log("com1元件渲染完畢了");
destroyed() {
console.log("com1元件銷毀了");
// activited聲明周期函數，當元件被激活時調用。
activated() {
console.log("com1 activited");
}
let com2 = {
template:"#com2",
console.log("com2元件建立了");
console.log("com2元件渲染完畢了");
console.log("com2元件銷毀了");
console.log("com2 activited");
new Vue({
el:"#app",
data:{
loginType:"com1"
components:{
com1,
com2
}
});
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)