在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样:
在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件。
html:
<h3>动态组件</h3>
<!-- 定义三个temp模板,用于切换 -->
<template id="temp-tab01">
<div>this is tab01</div>
</template>
<template id="temp-tab02">
<div>this is tab02</div>
</template>
<template id="temp-tab03">
<div>this is tab03</div>
</template> <div id="dr01">
<!-- 导航栏 -->
<div class="border cf">
<ul>
<li><a href="javascript:void(0);" @click="toggleTabs(tab01Text);">{{tab01Text}}</a></li>
<li><a href="javascript:void(0);" @click="toggleTabs(tab02Text);">{{tab02Text}}</a></li>
<li><a href="javascript:void(0);" @click="toggleTabs(tab03Text);">{{tab03Text}}</a></li>
</ul>
</div>
<!-- 点击导航后要切换的内容 -->
<div class="border" style="height: 100px;">
<!-- 如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数 -->
<component :is="currentView" keep-alive></component>
</div>
</div>
js:
//扩展组件tab01
var tab01 = Vue.extend({
template: "#temp-tab01",
});
//扩展组件tab02
var tab02 = Vue.extend({
template: "#temp-tab02",
});
//扩展组件tab03
var tab03 = Vue.extend({
template: "#temp-tab03",
});
//新建vue实例
var dr01 = new Vue({
el: "#dr01",
data: {
tab01Text: "tab01", //导航栏文本1
tab02Text: "tab02", //导航栏文本2
tab03Text: "tab03", //导航栏文本3
currentView: 'tab01', //默认选中的导航栏
},
//局部注册组件
components: {
tab01: tab01,
tab02: tab02,
tab03: tab03,
},
methods: {
//绑定tab的切换事件
toggleTabs: function(tabText) {
this.currentView = tabText;
}
}
});
步骤解释:
1、在html中定义三个template模板
2、在js中通过Vue.extend()中指定扩展组件的模板,在vue实例中局部注册三个组件
3、html中在要切换tab的地方通过<component :is="currentView" keep-alive></component>来动态切换成我们要显示的组件
"currentView":是要展示的模板的名称。
"keep-alive":如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数。
4、在li中添加点击事件toggleTabs,将vm的currentView切换为要显示的模板的名称即可。
结果:
#过渡效果
为了让切换的时候过渡效果(后面我会讲下vue的过渡效果,用css3来写)平滑自然,我们需要在component上添加transition-mode属性
在这里我们将component标签添加两个属性transition和transition-mode
<component :is="currentView" transition="fade" transition-mode="out-in" keep-alive></component>
然后定义css样式:
.fade-transition {
transition: opacity .3s ease;
} .fade-enter,
.fade-leave {
opacity: 0;
}
这样就可以了,我们看下后面的效果:
Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)的更多相关文章
-
Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
-
Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
-
Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
-
Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
-
Vue.js-----轻量高效的MVVM框架(八、使用组件)
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
-
Vue.js-----轻量高效的MVVM框架(六、Class与Style绑定)
这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...
-
Vue.js-----轻量高效的MVVM框架(五、计算属性)
#基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...
-
Vue.js-----轻量高效的MVVM框架(四、指令)
Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性.指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用.指令的职责就是当其表达式的值 ...
-
Vue.js-----轻量高效的MVVM框架(三、认识数据绑定)
插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...
随机推荐
-
查看IIS连接数
如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带的系统监视器来查看. 一.运行-->输入“perfmon.msc”. 二.在“系统监视器”图表区域里点击右键,然后 ...
-
关于for、foreach、filter等的一些用法
通常我们使用得最熟悉的是for循环. 比如对于一组数字的排大小,可以使用冒泡法. var a=[]; for(var d=0;d<5;d++){ var b=window ...
-
Senparc.Weixin.MP SDK 微信公众平台开发教程(三):微信公众平台开发验证
要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...
-
DataSet 中的数据排序 及 DataRow装成DataTable
1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...
-
剑指offer32 整数中1出现的次数(从1到n整数中1出现的次数)
class Solution { public: int NumberOf1Between1AndN_Solution(int n) { ) ; ; ; while(i<=n) { int p= ...
-
30分钟,让你彻底明白Promise原理
前言 前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的.ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不 ...
-
linux 终端命令行的快捷键列表
终端有很多快捷键,不太好记,常用的在这里 Ctrl+r 实现快速检索使用过的历史命令.Ctrl+r中r是retrieve中r.Ctrl+a:光标回到命令行首. (a:ahead)Ctrl+e:光标回到 ...
-
【DWM1000】 code 解密10 一 TAG 发送最后一个消息
更上面ANCHOR发送信息时的RTLS_DEMO_MSG_ANCH_RESP, 我们很快就可以找到如下代码 case RTLS_DEMO_MSG_ANCH_RESP: { 这里面一部分是设置重要变量, ...
-
lua脚本在游戏中的应用
为什么要在游戏中使用脚本语言? 要解释这个问题首先我们先来了解一下脚本语言的特性: 学习门槛低,快速上手 开发成本低,可维护性强 动态语言,灵活性高 相对于C/C++这类高复杂性.高风险的编译型语言来 ...
-
Spring Cloud Ribbon Client
首先,我们还是先从springcloud官方文档中找下相关说明,如下图所示,可以看到从1.2.0版本(也就是从Spriing Cloud Camden)之后,新增了这个通过配置文件来配置负载均衡的功能 ...