Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

时间:2022-09-17 11:16:18

在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样:

  Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

在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.js-----轻量高效的MVVM框架(十二、组件动态切换)

#过渡效果

为了让切换的时候过渡效果(后面我会讲下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框架(十二、组件动态切换)的更多相关文章

  1. Vue&period;js-----轻量高效的MVVM框架(二、Vue&period;js的简单入门)

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"&gt ...

  2. Vue&period;js-----轻量高效的MVVM框架(一、初识Vue&period;js)

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...

  3. Vue&period;js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...

  4. Vue&period;js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. Vue&period;js-----轻量高效的MVVM框架(八、使用组件)

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  6. Vue&period;js-----轻量高效的MVVM框架(六、Class与Style绑定)

    这个相对来说简单,看一遍代码就懂. 一.完整片段: <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  7. Vue&period;js-----轻量高效的MVVM框架(五、计算属性)

    #基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...

  8. Vue&period;js-----轻量高效的MVVM框架(四、指令)

    Vue指令 指令 (Directives) 是特殊的带有前缀 v- 的特性.指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用.指令的职责就是当其表达式的值 ...

  9. Vue&period;js-----轻量高效的MVVM框架(三、认识数据绑定)

    插值 1.文本插值 (1)双向数据绑定 v-model="msg0101",一旦v-model中的数值发生变化,所有用vue表达式{{msg0101}}的数据都会更新. (2)单次 ...

随机推荐

  1. 查看IIS连接数

    如果要想知道确切的当前网站IIS连接数的话,最有效的方法是通过windows自带的系统监视器来查看. 一.运行-->输入“perfmon.msc”. 二.在“系统监视器”图表区域里点击右键,然后 ...

  2. 关于for、foreach、filter等的一些用法

    通常我们使用得最熟悉的是for循环. 比如对于一组数字的排大小,可以使用冒泡法. var a=[];     for(var d=0;d<5;d++){         var b=window ...

  3. Senparc&period;Weixin&period;MP SDK 微信公众平台开发教程(三):微信公众平台开发验证

    要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...

  4. DataSet 中的数据排序 及 DataRow装成DataTable

    1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...

  5. 剑指offer32 整数中1出现的次数(从1到n整数中1出现的次数)

    class Solution { public: int NumberOf1Between1AndN_Solution(int n) { ) ; ; ; while(i<=n) { int p= ...

  6. 30分钟,让你彻底明白Promise原理

    前言 前一阵子记录了promise的一些常规用法,这篇文章再深入一个层次,来分析分析promise的这种规则机制是如何实现的.ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不 ...

  7. linux 终端命令行的快捷键列表

    终端有很多快捷键,不太好记,常用的在这里 Ctrl+r 实现快速检索使用过的历史命令.Ctrl+r中r是retrieve中r.Ctrl+a:光标回到命令行首. (a:ahead)Ctrl+e:光标回到 ...

  8. 【DWM1000】 code 解密10 一 TAG 发送最后一个消息

    更上面ANCHOR发送信息时的RTLS_DEMO_MSG_ANCH_RESP, 我们很快就可以找到如下代码 case RTLS_DEMO_MSG_ANCH_RESP: { 这里面一部分是设置重要变量, ...

  9. lua脚本在游戏中的应用

    为什么要在游戏中使用脚本语言? 要解释这个问题首先我们先来了解一下脚本语言的特性: 学习门槛低,快速上手 开发成本低,可维护性强 动态语言,灵活性高 相对于C/C++这类高复杂性.高风险的编译型语言来 ...

  10. Spring Cloud Ribbon Client

    首先,我们还是先从springcloud官方文档中找下相关说明,如下图所示,可以看到从1.2.0版本(也就是从Spriing Cloud Camden)之后,新增了这个通过配置文件来配置负载均衡的功能 ...