<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. Ceph配置文件查看修改方式

    1.     修改ceph配置文件的方式有三种:(其中包含临时和永久生效) 1)      修改所有或者指定的进程 2)      修改当前服务器进程 3)      修改配置文件 Note:在线修改 ...

  2. mysql 保存23:59:59 自动加一秒

    mysql保存系统传递的时间会诡异的增加一秒钟使用如下工具类: public static Date getEndOfDay(Date date) { Calendar calendarEnd = C ...

  3. CF1005F Berland and the Shortest Paths

    \(\color{#0066ff}{ 题目描述 }\) 一个无向图(边权为1),输出一下选边的方案使\(\sum d_i\)最小(\(d_i\)为从1到i的最短路) 输出一个方案数和方案(方案数超过k ...

  4. 关于Intel芯片架构的发展史

    ---恢复内容开始---  当你真正的深入去行走在底层的道路上,你就会接触大量的一些貌似懂的概念性名词,比如Intel公司的x86架构,x64等等,又或者是当年的386,486等等,唉,有的时候真的是 ...

  5. zookeeper分布式锁简单实现(JavaApi)

    1.创建会话连接 package com.karat.cn.zookeeperAchieveLock.javaapilock; import org.apache.zookeeper.WatchedE ...

  6. C++_了解虚函数的概念

    第一.先了解基本概念介绍: 虚函数.多态.继承都是紧密相关的概念.而继承是所有概念的基础: 继承的概念:是面向对象编程的三大特性之一(另外两个是:多态和封装):继承可以使得子类具有父类的属性和方法或者 ...

  7. Entity Framework 更新带外键的实体为null

    using (var ctx = new PortalContext()){    var city = ctx.Cities.Find(42);    ctx.Entry(city)        ...

  8. P4289 [HAOI2008]移动玩具

    传送门 广搜 4*4 的方阵只有 0 和 1 显然可以状态压缩 (如样例的开始状态压缩后就是1111000011100010) 为了加快速度用了双向广搜(顺便学了一下双向广搜) 双向广搜顾名思义 就是 ...

  9. xlrd和xlwd模块

    xlrd模块 是python中一个第三方的用于读取excle表格的模块 exlce结构分析 一个excle表格包含多个sheet 一个sheet中包含多行多列 每个单元格具备唯一的行号和列号 常用函数 ...

  10. django组件之中间件

    中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到 ...