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>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/30.html
组件切换 -- 事件. gif
通过 component 标签指定当前组件
<component :is="comName"></component>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/31.html
切换组件
组件切换时加上动画效果
使用 transition 标签将组件包裹起来, 实现组件切换时的动画效果
- <transition mode="out-in">
- <component :is="comName"></component>
- </transition>
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/32.html
组件切换 -- 动画. gif
来源: http://www.jianshu.com/p/163e45fe5290