第六章 组件 60 组件切换-应用切换动画和mode方式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
} .v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head> <body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- 通过 mode 属性,设置组件切换时候的模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition> </div> <script>
//组件名称是 字符串
Vue.component('login',{
template:'<h3>登录组件</h3>'
}) Vue.component('register',{
template:'<h3>注册组件</h3>'
}) //创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
comName:'login'//当前 component 中的 :is 绑定的组件的名称
},
methods:{}
});
</script>
</body>
</html>
第六章 组件 60 组件切换-应用切换动画和mode方式的更多相关文章
- 第六章、forms组件
目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...
- 第六章:四大组件之Activity
tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性
原文:ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性 深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开 ...
- 第六章、ajax方法以及序列化组件
目录 第六章.ajax方法 一.choice参数介绍 二.MTV与MVC模型 三.ajax方法 四.案例 五.Ajax传json格式的数据 六. AJAX传文件 代码如下 ajax传文件需要注意的事项 ...
- KnockoutJS 3.X API 第六章 组件(2) 组件注册
要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...
- 第九章:四大组件之Broadcast Receiver
第九章:四大组件之Broadcast Receiver 一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...
- Java核心技术卷一基础知识-第9章-Swing用户界面组件-读书笔记
第9章 Swing用户界面组件 本章内容: * Swing与模型-视图-控制器设计模式 * 布局管理概述 * 文本输入 * 选择组件 * 菜单 * 复杂的布局管理 * 对话框 本章将介绍构造功能更加齐 ...
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
随机推荐
- gzip压缩配置
gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 200;gzip_types text/css text/xml applic ...
- 20191204-使用nginx解决ajax测试调用接口跨域问题
问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...
- 安装oracle数据库11g及问题解决
安装步骤可借鉴https://www.cnblogs.com/qfb620/p/4577255.html 1.安装后发现用Navicat无法连接数据库显示报错ORA-28547:connection ...
- 洛谷 P2018 消息传递 题解
题面 总体来说是一道从下往上的DP+贪心: 设f[i]表示将消息传给i,i的子树全部接收到所能消耗的最小时间: 那么对于i的所有亲儿子节点j,我们会贪心地先给f[j]大的人传递,然后次大..... 可 ...
- django 路由层 伪静态网页 虚拟环境 视图层
路由层 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态网页 虚拟环境 视图层 JsonResponse FBV与CBV 文件上传 项目urls.py下面 from app01 import ...
- Jmeter之逻辑控制器/定时器
Jmeter逻辑控制器 更新中 线程组->添加->逻辑控制器->XX控制器 1.仅一次控制器 使用场景:线程数为1,登录1次,循环浏览N次. 如果,登录账号参数化,线程数为M时,登录 ...
- Web前端开发CSS基础
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- 树莓派安装SSH
1. 安装ssh sudo apt-get install openssh-server 2. 检查树莓派SSH服务是否开启 ps -e|grep ssh 3. SSH服务开启 sudo /etc/i ...
- Scala学习七——包和引入
一.本章要点 包也可也可以像内部类那样嵌套 包路径不是绝对路径 包声明链x.y.z并不自动将中间包x和x.y变成可见 位于文件顶部不带花括号的包声明在整个文件范围内有效 包对象可以持有函数和变量 引入 ...
- mssql 数据库“查询处理器用尽了内部资源,无法生成查询计划。”问题的处理
在项目中动态拼接sql语句,使用union all连接结果集,每个查询语句都使用了in(几百个数值).语句如: ,,,..............................) UNION ALL ...