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
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有