<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. CI框架源码学习笔记3——Log.php

    上一节说完了Common.php,然而跟代码打交道总是免不了日志记录,所以这一节我们说说Log.php文件. 先看看类里面的几个属性, protected $_log_path;  日志路径 prot ...

  2. 并查集【洛谷P1197】 [JSOI2008]星球大战

    P1197 [JSOI2008]星球大战 题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治着整个星系. 某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系 ...

  3. freemarker常用标签解释

    标签一: if else 你可以使用if,elseif和else指令来条件判断是否越过模板的一个部分.这些condition-s必须计算成布尔值,否则错误将会中止模板处理.elseif-s和else- ...

  4. gitflow工作流简介

    gitflow工作流是一种依赖于Git版本管理工具,按特定规范对项目开发.测试.上线流程进行管理的工作方式.它是一种为实现规范化管理的约定,它明确了各个分支的意义,使整个团队的分工协作更加和谐明晰. ...

  5. (转)Selenium-11: Execute JavaScript with JavascriptExecutor

    Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don’t re ...

  6. Linux中切换前后台命令:ctrl+z,bg,fg,jobs

    一.运行某些服务的时候,我希望切换到后台运行: 两种方法: 1.可以在运行的时候,在启动服务命令的最后面加一个字符&,例如 ./serviceStart & 2.在服务启动后,按ctr ...

  7. AJAX使用说明书 基础

    AJAX简介 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  8. IP 地址分类

    1.1 网络IP地址分类 网络通讯过程中数据封装与解封过程(网际互联通讯过程) TCP/IP模型 1)应用层 总结记录一些常见网络协议以及对应的端口号(FTP HTTP telnet) 2)主机到主机 ...

  9. Javascript各种事件汇总

    https://www.cnblogs.com/diligenceday/p/4190173.html#undefined https://www.cnblogs.com/starof/p/40663 ...

  10. JVM发展史和Java运行时内存区域

    目前三大主流JVM: Sun HotSpot:Sun于1997年收购Longview Technologies公司所得.Sun于2009年被Oracle收购. BEA JRockit:BEA于2002 ...