<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})

  

vue多个组件的过渡的更多相关文章

  1. vue单元素/组件的过渡

    (1)过渡的类名 v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的状态.在整个进入过渡的阶段中应用,在元 ...

  2. vue中的组件

    一.自定义组件1.组件命名   A.dom模板在HTML模板中始终使用kebab-case命名组件 <kebab-cased-component> </kebab-cased-com ...

  3. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

  4. vue的动画组件(transition)

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  5. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  6. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  7. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  8. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  9. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

随机推荐

  1. P1402 酒店之王 最大流

    \(\color{#0066ff}{ 题目描述 }\) XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等,也有自己所爱的菜,但是该 ...

  2. 拓扑排序+数学+DP【洛谷P1685】 游览

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  3. Could not instantiate bean class [org.springframework.data.mongodb.core.MongoTemplate]

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'repositoryDa ...

  4. Codeforces-C-Grid game(思维)

    You are given a 4x4 grid. You play a game - there is a sequence of tiles, each of them is either 2x1 ...

  5. 华东交通大学2015年ACM“双基”程序设计竞赛1002

    Problem B Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  6. java读取配置到Hash表里

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; im ...

  7. Linux防火墙配置学习记录

    一.iptables基本原理 1.iptables是一个管理内核包过滤的工具,包含4个表,5个链 表和链被称为Netfilter模块的两个维度, 表提供特定的功能内置四个表: filter表:用于对数 ...

  8. my27_OGG MySQL To MySQL错误汇总

    OGG-00446 2019-02-12T14:57:57.668+0800 ERROR OGG-00446 Oracle GoldenGate Delivery for MySQL, r1.prm: ...

  9. my12_xtrabackup压缩备份与恢复

    xtrabackup版本 # rpm -qa | grep xtrabackup percona-xtrabackup-24-2.4.12-1.el7.x86_64 此版本为目前比较新的版本(2018 ...

  10. Spring MVC自定义错误页面

    在web.xml中添加: <error-page(其他属性404...省略咯)> <location>/error</location> </error-pa ...