vue中多个元素或多个组件之间的动画效果
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-acitve,.v-leave-active{
opacity: opacity 1s;
}
</style>
<div id='app'>
<transition>
<div v-if='show'>hello world</div>
<div v-else>bye world</div>
</transition>
<button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
<div v-if='show' key='hello'>hello world</div>
<div v-else key='bye'>bye world</div>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-acitve, .v-leave-active {
transition: opacity 1s;
}
</style>
<div id='app'>
<transition mode='out-in'>
<child v-if='show'></child>
<child-one v-else></child-one>
</transition>
<button @click='handleClick'>切换</button>
</div> <script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-acitve, .v-leave-active {
transition: opacity 1s;
}
</style>
<div id='app'>
<transition mode='out-in'>
<component :is='type'></component>
</transition>
<button @click='handleClick'>切换</button>
</div> <script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el:'#app',
data:{
type:'child'
},
methods:{
handleClick:function(){
this.type = (this.type === 'child' ? 'child-one' : 'child')
}
}
})
</script>
vue中多个元素或多个组件之间的动画效果的更多相关文章
- vue实现多个元素或多个组件之间动画效果
多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- Vue 中使用 extent 开发loading等全局 组件
Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
随机推荐
- 3.数据校验和SpringEL
1.数据验证 数据验证不应该被限定在web层去处理,他应该在任何需要做数据验证的地方做验证: 基于以上考虑,Spring设计了一个既方便又可以在所有层使用的Validator接口 Spring提供了V ...
- $.extend({},defaults, options)
1.$.extend({},defaults, options) 这样做的目的是为了保护包默认参数.也就是defaults里面的参数. 做法是将一个新的空对象({})做为$.extend的第一个参数, ...
- 单例模式+volatile禁止指令重排序
单例模式: 单例,顾名思义就是只能有一个.不能再出现第二个.就如同地球上没有两片一模一样的树叶一样. 在这里就是说:一个类只能有一个实例,并且整个项目系统都能访问该实例. 单例模式共分为两大类: 懒汉 ...
- Spring---数据缓存(未完待续)
1.为什么需要数据缓存? 程序的瓶颈大都在数据库,而内存的速度是远远大于硬盘的,当我们需要重复读取相同数据时,一次又一次的请求数据库或者远程服务,导致大量的时间浪费在数据库或者 远程服务上,导致程序性 ...
- VS 开发中觉得不错的几款插件
1.C# Outline 2013 {}折叠 2.Indent Guides:为缩进添加竖直线 3.ResXManager:多语言资源文件编辑 4.C# Formatter:代码清理 5.Highl ...
- 获取url传的参数转变为对象的方法
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...
- maya 安装不上
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- C# String.Join用法
String.Join(String, String[]) 在指定 String 数组的每个元素之间串联指定的分隔符 String,从而产生单个串联的字符串 例如: string [] array={ ...
- Neutron命令测试1
Refer: http://wenku.baidu.com/link?url=DtrbhO0A393hg8kOWKX0XYuZtSC8Iu0occn8NF1pYcUwNzlaSq5qXCQoNEBDM ...
- 但是你没有【But you didn't.】【by Anonymous】
作者是一位普通的美国妇女,她的丈夫在女儿4岁时应征入伍去了越南战场,从此她便和女儿相依为命.后来,她的丈夫.孩子的爸爸不幸阵亡.她终身守寡,直至年老病逝.她女儿在整理遗物时发现了母亲当年写给父亲的这首 ...