vue.js组件切换

vue.js多个组件之间进行切换，可以有多种方式，以下列举几种作为范例：

通过事件进行切换

声明两个组件

<template id="login">
    <h3>登录组件</h3>
</template>
<template id="register">
    <h3>注册组件</h3>
</template>

使用@click事件进行切换

<button class="btn btn-success" @click="flag=true">登录</button>
<button class="btn btn-info col-lg-offset-2" @click="flag=false">注册</button>
<login v-if="flag"></login>
<register v-if="!flag"></register>

具体代码

组件切换--事件.gif

通过component标签指定当前组件

<component :is="comName"></component>

具体代码

切换组件

组件切换时加上动画效果

使用transition标签将组件包裹起来，实现组件切换时的动画效果

<transition mode="out-in">
    <component :is="comName"></component>
</transition>

具体代码

组件切换--动画.gif

更多vue.js的有趣实例，请点击移步至目录