实现标签页的切换（组件的切换）
方式一
使用v-if和v-else
<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>
<script>
Vue.component('login',{
template:'<h1>登录界面</h1>'
})
Vue.component('register',{
template:'<h1>注册界面</h1>'
})
var vm=new Vue({
el:'#app',
data:{
flag:false
}
})
</script>
但是v-if和v-else只能有两种情况，所以此时只能有两种需要的组件
方式二
<component :is="comName"></component>
使用companent标签，这个标签是Vue官方指定的，可以用来表示哪一个组件显示，这个时候:is=""其中传入一个组件的名称（注意，组件名称是字符串，所以需要单引号）
<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>-->
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<component :is="comName"></component>
</div>
<script>
Vue.component('login',{
template:'<h1>登录界面</h1>'
})
Vue.component('register',{
template:'<h1>注册界面</h1>'
})
var vm=new Vue({
el:'#app',
data:{
flag:false,
comName:''
}
})
</script>
当前学习了几个Vue提供的标签
- component（显示某一个组件）
- template（组件的模板结构）
- transition（动画）
- transitionGroup
案例
实现组件的动画切换
<transition enter-active-class="animated bounce">
<component :is="comName"></component>
</transition>
