<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
<style type="text/css">

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>

<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
<div id="transitiondemo">
<input type="radio" name="boy" value="v-a" id="a" v-model="view">
<input type="radio" name="boy" value="v-b" id="b" v-model="view">
<p>{{picked}}</p>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
new Vue({
el: '#example-1',
data: {
show: true
}
})
new Vue({
el: '#example-2',
data: {
show: true
}
})
new Vue({
el: '#example-3',
data: {
show: true
}
})
new Vue({
el: '#transitiondemo',
data: {
view:'v-a',
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
</script>
</html>

vue 组件 单选切换控制模板 v-bind-is的更多相关文章

  1. Vue 组件6内联模板

    如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...

  2. vue 组件来回切换时 记住上一个组件滚动位置(keep-alive）

    记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-a ...

  3. vue前端开发那些事——vue组件开发

    vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...

  4. vue组件开发练习--焦点图切换

    1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...

  5. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  6. vue: 关于多路由公用模板，导致组件内数组缓存问题

    当多个路由复用同一个模板,此时在这几个路由间切换,模板并不会重新挂载.针对这个情况,我们需要在当前逻辑内对路由做监听,在发生变化时更新对应属性,已满足需求. 但是,在实现的过程中会遇到如下情况: 如图 ...

  7. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  8. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  9. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

随机推荐

  1. 【HNOI2013】消毒

    题面 题解 当只有二维时,就是一个二分图匹配的板子题 三维的时候就很好做了,暴力枚举一维的情况,因为\(\min(x,y,z) = \sqrt{5000} < 18\),于是时间复杂度有保证 代 ...

  2. 取值：form表单取值、input框绑定取值

    1. form表单取值1.1 方式一,通过<form bindsubmit="formSubmit">与<button formType="submit ...

  3. python 模块之 bisect

    python一个有趣的模块,bisect,感觉挺有趣,怎么有趣呢,下面来给你道来. 我们先生成一个list data=[4,8,7,1] data.sort() 打印这个list [1,4,7,8] ...

  4. git 自己易忘的命令

    1. git 更新远程分支列表 git remote update origin --prune git remote update origin -p 2. 查看远程分支: git branch - ...

  5. ruby安装卸载

    1.用命令yum install ruby安装,是2.0以下的版本.不建议使用 2.2.2以上  下载地址:https://www.ruby-lang.org/en/news/2018/03/28/r ...

  6. Tetris(俄罗斯方块)

    一天有个小朋友问我OpenGL俄罗斯方块怎么写. 俄罗斯方块分成两部分游戏逻辑和画面渲染. 1. 游戏逻辑 一个简单的俄罗斯方块的逻辑部分需要考虑的情况如下: 1. 方块的表示(坐标, 旋转, 上下左 ...

  7. 《Redis设计与实现》阅读笔记（四）--字典

    字典 字典,map,是用于保存键值对的抽象数据结构,是hash表实现.字典中的键唯一,通过键来操作值.Redis的数据库使用字典来作为底层实现. 定义 Redis的字典使用哈希表作为底层实现,一个哈希 ...

  8. 【Kubernetes】基于角色的权限控制：RBAC

    Kubernetes中所有的API对象,都保存在Etcd里,对这些API对象的操作,一定都是通过访问kube-apiserver实现的,原因是需要APIServer来做授权工作. 在Kubernete ...

  9. 基于神念TGAM的脑波小车（4）

    我使用的是HC05和BT06俩个蓝牙模块 1.[AT模式]HC05蓝牙模块的PIO11接VCC,上电后即进入HC05AT指令模式,对于BT06蓝牙直接上电进入AT模式,用USBT06转TTL模块连接到 ...

  10. Daily Scrum (2015/11/1)

    今天晚上我们照例召开了每周末的小组例会,主要总结本周的工作和讨论下一周的工作. 首先是本周的一些主要工作: 1.进行了代码的修改和完善. 2.开始进行服务器配置和UI. 3.学习借鉴了nutch爬虫的 ...