首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue.js组件切换

vue.js组件切换

作者头像
章鱼喵
发布2018-08-02 15:31:16
发布2018-08-02 15:31:16
9K0
举报
文章被收录于专栏:codingcoding

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

通过事件进行切换

声明两个组件

代码语言:javascript
复制
<template id="login">
    <h3>登录组件</h3>
</template>
<template id="register">
    <h3>注册组件</h3>
</template>

使用@click事件进行切换

代码语言:javascript
复制
<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标签指定当前组件

代码语言:javascript
复制
<component :is="comName"></component>

具体代码

切换组件

组件切换时加上动画效果

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

代码语言:javascript
复制
<transition mode="out-in">
    <component :is="comName"></component>
</transition>

具体代码

组件切换--动画.gif

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.07.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 通过事件进行切换
  • 通过component标签指定当前组件
  • 组件切换时加上动画效果
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档