Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue.js组件切换

vue.js组件切换

作者头像
章鱼喵
发布于 2018-08-02 07:31:16
发布于 2018-08-02 07:31:16
6.9K00
代码可运行
举报
文章被收录于专栏:codingcoding
运行总次数:0
代码可运行

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

通过事件进行切换

声明两个组件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template id="login">
    <h3>登录组件</h3>
</template>
<template id="register">
    <h3>注册组件</h3>
</template>

使用@click事件进行切换

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
<component :is="comName"></component>

具体代码

切换组件

组件切换时加上动画效果

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<transition mode="out-in">
    <component :is="comName"></component>
</transition>

具体代码

组件切换--动画.gif

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.07.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue.js之组件篇
组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。
指尖改变世界
2018/08/31
2.4K0
vue.js之组件篇
10天从入门到精通Vue(三)vue组件指南
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同:
共饮一杯无
2022/11/28
8960
10天从入门到精通Vue(三)vue组件指南
从零开始学 Web 之 Vue.js(六)Vue的组件
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
Daotin
2018/09/30
2.3K0
从零开始学 Web 之 Vue.js(六)Vue的组件
Vue教程(组件-切换案例)
  前面介绍了Vue中组件的创建方式和data及methods属性,本文我们来做一个Vue组件的切换案例,效果如下:
用户4919348
2019/07/27
7440
Vue 05.组件
组件: 组件是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化区别:
LittlePanger
2020/04/14
9850
vue组件的创建和切换
使用 Vue.component('组件的名称', 创建出来的组件模板对象) 来定义全局组件,比如Vue.component('myCom1', com1) 使用 Vue.component 定义全局组件的时候,如果组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之前,使用 - 连接,比如<my-com1></my-com1> 如果不使用驼峰,则直接拿名称来使用即可,比如Vue.component('mycom1', com1)
砖业洋__
2023/05/06
2390
vue组件的创建和切换
Vue组件
组件:拆分vue实例代码量,不同的组件来划分不同的功能模块,需要什么功能调用什么组件
切图仔
2022/09/08
5970
Vue组件
vue学习笔记3
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同:
用户6362579
2019/09/29
7820
40. Vue组件切换动画以及mode效果设置
上一篇使用component元素实现组件切换,但是没有切换的动画效果。那么可以参考官网的例子,实现一下组件切换的动画,以及mode效果设置。
Devops海洋的渔夫
2020/07/03
2.1K0
40. Vue组件切换动画以及mode效果设置
【Vue】(3)生命周期钩子函数 | 组件定义的方式 | 组件切换方式 | 父子组件之间传值 | watch/methods/computed
beforeDestory:实例销毁之前调用。在这一步,实例(包括:过滤器、指令、Data、methods等)仍然完全可用。
前端修罗场
2023/10/07
4400
37. Vue组件切换动画以及mode效果设置
上一篇使用component元素实现组件切换,但是没有切换的动画效果。那么可以参考官网的例子,实现一下组件切换的动画,以及mode效果设置。
Devops海洋的渔夫
2022/01/17
6650
37. Vue组件切换动画以及mode效果设置
vue基础(四)
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: + 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; + 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
不愿意做鱼的小鲸鱼
2022/09/24
1.9K0
vue基础(四)
39. Vue组件切换-使用component元素实现组件切换
上一篇章使用v-if和v-else结合一个flag属性值来控制组件之间的切换。本章节使用components元素来更加直接的切换组件。
Devops海洋的渔夫
2020/07/02
5K0
vue.js路由嵌套
不是每一个路由都从根目录开始,如登录和注册两个路由都属于帐号操作,我们想将这两个路由作为账号的子路由。
章鱼喵
2018/08/02
3K0
vue.js路由嵌套
45. Vue路由vue-router的基本使用
vue-router官方文档:https://router.vuejs.org/zh/
Devops海洋的渔夫
2020/07/21
2.5K0
45. Vue路由vue-router的基本使用
实战总结 Vue 学习看这一篇就够了
当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于 vue2.x,vue-cli3.x ,主要记录些,vue 常用的指令、事件,监听、数据绑定、过滤器、组件、动画、vuex,vue-router 等日常工作中时常用到的东西,也有些常用的插件和开发工具的介绍与使用,以及部分性能优化的建议与实践,如有不对,或不足的地方,也请各位大神,指出来,学习学习。
网罗开发
2021/02/26
1.9K0
Vue动画与生命周期详解
Vue为vue动画提供的六个类: transition标签的name-enter, transition标签的name-leave 动画开始前动画元素的初始状态的 transition标签的name-enter-to, transition标签的name-leave-to 动画结束时元素的状态 transition标签的name-enter-active, transition标签的name-leave-active 动画的过渡状态
生南星
2019/07/22
6070
Vue动画与生命周期详解
Vue.js 系列教程 5:动画
原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地方。我和原作者的初衷一样,希望大家能够通过这个系列文章有所收获,至少可以增加学习的乐趣,我也在学习的路上,所学心得必将与大家共勉。 这是 JavaScript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来)。这个系列教程并不是一个完整的用户手
叙帝利
2018/01/17
2.9K0
Vue.js 系列教程 5:动画
vue.js路由传参
vue.js路由传递参数有两种方式 /login?id=2&name=段誉, 用 $route.query.id 接收 /register/1/乔峰, 用 $route.params.id 接收 效果
章鱼喵
2018/08/02
5.2K0
vue.js路由传参
32.Vue - 动画 - transition使用过渡类名实现动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
Devops海洋的渔夫
2020/04/24
2.8K0
32.Vue - 动画 - transition使用过渡类名实现动画
相关推荐
vue.js之组件篇
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验