<body>
<script src="../libs/vue.js"></script>
<div id="app">
<a href="" @click.prevent="tag = true">登录</a>
<a href="" @click.prevent="tag = false">注册</a>
组件的切换 1.v-if
<login v-if="tag"></login>
<register v-else></register>
<a href="" @click.prevent="seen = true">登录</a>
<a href="" @click.prevent="seen = false">注册</a>
组件的切换 2.v-show
<login v-show="seen"></login>
<register v-show="!seen"></register>
<a href="" @click.prevent="sendlogin">登录</a>
<a href="" @click.prevent="flag = 'register'">注册</a>
<!--组件的切换 3.component -->
<!--component 是用来占位的，具体内容，还要根据is里的数据展示-->
<!--is是用来指定要展示组件的名称的 is=“componentId”-->
<component :is="flag"></component>
</div>
<template id="login">
<div>
<h2>login子组件的内容</h2>
</div>
</template>
<template id="register">
<div>
<h2>register子组件的内容</h2>
</div>
</template>
<script>
//注意：html对大小写是不明感
//有大写字母的组件，需要转换成小写
//尽量不要用驼峰命名的规则命名组件，
//组件的名称
Vue.component('login', {
template: '#login'
})
Vue.component('register', {
template: '#register'
})
var app = new Vue({
el: '#app',
data: {
tag: true,
seen: true,
flag: 'login'
},
methods: {
sendlogin() {
this.flag = 'login'
}
}
})
</script>
</body>
