<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div>
<span @click='flag="login"'>登录</span>
<span @click='flag="reg"'>注册</span>
</div>
<!-- 有缺陷只能是两个 -->
<div v-if='flag'>
<login></login>
</div>
<div v-else='flag'>
<reg></reg>
</div>
<!-- 有缺陷只能是两个 -->
<!-- 根据变量调用组件 -->
<!-- 必须加'"' 要么就是变量-->
<component :is='"login"'></component>
<!-- 这是变量不需要'"'-->
<component :is='flag'></component>
</div>
<script type="text/javascript">
Vue.component('login',{
template:'<h1>登录</h1>'
})
Vue.component('reg',{
template:'<h1>注册</h1>'
})
new Vue({
el:'#app',
data:{
flag:0,
},
methods:{
}
})
</script>
</body>
</html>