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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.07.07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录