<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. 前端开发快速定位bug的一些小技巧

    1,根据报错信息定位: (1) Uncaught TypeError: Cannot read property 'attr' of undefined; 此类型为变量或者对象属性未定义类型. (2) ...

  2. 7、OpenCV Python 高斯模糊

    __author__ = "WSX" import cv2 as cv import numpy as np #高斯模糊 基于权重(卷积) #高斯模糊 去燥效果很好 #高斯模糊 d ...

  3. 洛谷2685 [TJOI2012]桥

    [TJOI2012]桥 题目大意:给定一无向图,求删除一条边后1到n最短路的最大值,以及方案数. 做法:我们先从1为起点.从n为起点跑两边dij,获得每一个点到起点1.终点n的最短距离,其实距离和边权 ...

  4. opencv第一课,安装配置

    下载工具:本教程以OpenCV3.2.0为例. 解压:本教程解压到D盘,解压的其它地方也是可以的,解压完后得到一个名为opencv目录. 配置系统变量:选择此电脑(计算机)->右键属性选择-&g ...

  5. pytorch实现squeezenet

    squeezenet是16年发布的一款轻量级网络模型,模型很小,只有4.8M,可用于移动设备,嵌入式设备. 关于squeezenet的原理可自行阅读论文或查找博客,这里主要解读下pytorch对squ ...

  6. 记录Leetcode 鸡蛋掉落 的思路

    前言 首先看一下这个题目,是Leetcode的第887题"鸡蛋掉落": 你将获得 `K` 个鸡蛋,并可以使用一栋从 `1` 到 `N` 共有 `N` 层楼的建筑. 每个蛋的功能都是 ...

  7. Js 处理 错误图片...(不用jquery)

    document.addEventListener("error", function (e) { var elem = e.target; if (elem.tagName.to ...

  8. POJ 2441 Arrange the Bulls(状态压缩DP)

    题意很简单,n头牛,m个位置,每头牛有各自喜欢的位置,问安排这n头牛使得每头牛都在各自喜欢的位置有几种安排方法. 2000MS代码: #include <cstdio> #include ...

  9. hdu2795 Billboard(线段树)

    题意:h*w的木板,放进一些1*L的物品,求每次放空间能容纳且最上边的位子思路:每次找到最大值的位子,然后减去L线段树功能:query:区间求最大值的位子(直接把update的操作在query里做了) ...

  10. case when null then 'xx' else 'yy' end 无效

    Sql Server 中使用case when then 判断某字段是否为null,和判断是否为字符或数字时的写法不一样,而且语法能正常执行, 如果不注意数据内容,很容易搞错. 错误方法: CASE ...