<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>-->
<script src="lib/vue.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap.min.css"/>
<script src="lib/moment-with-locales.min.js"></script>
</head>
<body>
<!--組件切換方式1：適用於兩個間的切換-->
<div id="app">
<a href="" @click.prevent="flag=true">登錄</a>
<a href="" @click.prevent="flag=false">註冊</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<!--組件切換方式2：適用於多個間的切換-->
<div id="app2">
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">註冊</a>
<a href="" @click.prevent="comName='play'">逛逛</a>
<!--component是一個佔位符，is綁定組件的名稱-->
<component :is="comName"></component>
</div>
<script>
var login = Vue.extend({
template:'<h3>登錄</h3>'
});
Vue.component('login',login);
Vue.component('register',{
template:'<h3>註冊</h3>'
});
Vue.component('play',{
template:'<h3>逛逛</h3>'
});
var app = new Vue({
el:"#app",
data:function(){
return {
flag:true
}
},
methods:{
}
});
var app2 = new Vue({
el:"#app2",
data:function(){
return {
comName:'login'
}
},
methods:{
}
});
</script>
</body>
</html>
