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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

小程序实践(九):返回到上一个界面并传值回去

常见需求,修改某个信息,需要调到一个新界面有个输入框去修改内容,修改之后,点击后退按钮,新的数据就返回更新了

1963
来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

2114
来自专栏企鹅号快讯

如何操作DOM树?——“查询”

上一篇文章,我们写了关于《如何学习DOM?》的问题,指出DOM树的操作无非就是增删改查,那么,现在我们就来聊聊如何“查询”DOM树中的节点对象。 ? 如果想要操...

2239
来自专栏河湾欢儿的专栏

焦点事件

焦点详解:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候就可以接收用户的输入 1.点击 2.tab 3.js

1151
来自专栏smy

谷歌调试工具选取元素选择不到页面的具体元素问题

z-index的问题 document的默认值是0. 一旦出现这种问题,检查下是否对大背景设置了z-index:-1; 如果设置了这个,那么所有的被设元素的内容...

2755
来自专栏每日一篇技术文章

weex-27-通用事件

如上示例中定义的单击事件方法tap中,如果不传递参数,即使用默认参数的情况,系统会自动传递如下对象当成方法的参数

1223
来自专栏python3

tkinter -- RadioButton

Radiobutton 为单选按钮,即在同一组内只能有一个按钮被选中,每当选中组内的一个按钮时,其它的按钮自动改为非选中态,与其他控件不同的是:它有组的概念

951
来自专栏专业duilib使用+业余界面开发

duilib的Combo控件滚动条不显示的问题

3114
来自专栏Android Note

Android O:使用自定义字体资源

1603
来自专栏流柯技术学院

selenium切换窗口后定位元素出现问题的解决方案

在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定。

8262

扫码关注云+社区

领取腾讯云代金券