摘要：
--阻止阻止默认事件。如果v-if为true，则跳转到默认事件并渲染v-if组件，但不输入v-else。v-else--˃登录注册登录注册˂！
方式一：v-show或者v-if&v-else,通过控制一个标志位的bool值来实现组件的切换 []
方式一有局限性，就是只能控制两个组件间的切换，因为bool值就true和false两个。
方式二：使用vue官方提供的<component>标签，通过给这个标签绑定is属性实现多个组件之间的切换
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<scriptsrc="../../js/vue.js"></script>
</head>
<style>
.v-enter,
.v-leave-to{
transform:translateX(150px);
}
/*动画四个阶段*/
.v-enter-active,
.v-leave-active{
opacity:0;
transition:all1sease;
}
</style>
<body>
<divid="app">
<!--prevent阻止默认事件，a就是跳转这个默认事件
v-if为真就渲染v-if这个组件，而不会进入v-else，v-else亦然-->
<ahref=""@click.prevent="flag=true">登录</a>
<ahref=""@click.prevent="flag=false">注册</a>
<loginv-if="flag"></login>
<!--使用v-ifv-else实现组件切换-->
<registerv-else="flag"></register>
</div>
<divid="app2">
<!--点击a传入对应组件的名称-->
<ahref=""@click.prevent="componentname='login'">登录</a>
<ahref=""@click.prevent="componentname='register'">注册</a>
<!--第二种方式实现组件切换，第一种有缺陷，多个vue组件时，无法使用v-if、else-->
<!--使用vue提供的component标签:is="组件名称"提供那个就展示那个-->
</div>
<divid="app3">
<ahref=""@click.prevent="componentname='login'">登录</a>
<ahref=""@click.prevent="componentname='register'">注册</a>
<!--如果组件想要实现一些切换效果，只需要在transition标签中，设定model='out-in{【先出再进】}/in-out【先进再出】'-->
<transitionmodel='out-in'>
<component:is="componentname">
<!--绑定一个变量，变量指向那个组件就展示那个组件，-->
</component>
</transition>
</div>
</body>
<script>
Vue.component('login',{
template:'<h2>这是登录组件</h2>'
})
Vue.component('register',{
template:'<h3>这是注册组件</h2>'
})
letvm=newVue({
el:'#app',
data:{
vmsg:'helloworld',
flag:true,
}
})
letvm2=newVue({
el:'#app2',
data:{
componentname:'login',
}
})
letvm3=newVue({
el:'#app3',
data:{
componentname:'login',
}
})
</script>
</html>