vue组件---动态组件之多标签页面
首先看下效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态&异步组件</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
.tab_area{
width: 600px;
min-height: 300px;
border: 1px solid black;
margin: 20px auto;
}
.tab_area>button{
width: 200px;
height: 40px;
}
.child_button{
width: 200px;
height: auto;
float: left;
}
.child_button>button{
display: block;
width: 100px;
margin: 10px auto;
height: 30px;
}
.child_button+div{
float: right;
width: 400px;
text-align: left;
padding: 20px;
box-sizing: border-box;
max-height: 250px;
overflow-y: auto;
line-height: 30px;
}
</style>
<script src="vue-2.6.9.min.js"></script>
</head>
<body>
<!-- 、动态组件 -->
<div class="tab_area">
<button v-for="tab in tabs" v-on:click="currentTab = tab">{{tab}}</button>
<component v-bind:is="currentTabComponent"></component>
</div>
<!-- 、动态组件 -->
<script type="text/javascript">
/* 2级子级组件模板 */
Vue.component('tab-one',{
template:`
<div>
one展示信息
在component里面使用 v-bind: is,可以实现动态组件的效果.
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
在component里面使用 v-bind: is,可以实现动态组件的效果
</div>
`
})
Vue.component('tab-two',{
template:"<div>two展示信息</div>"
})
Vue.component('tab-three',{
template:"<div>three展示信息</div>"
})
Vue.component('tab-four',{
template:"<div>four展示信息</div>"
})
Vue.component('tab-five',{
template:"<div>five展示信息</div>"
})
Vue.component('tab-six',{
template:"<div>six展示信息</div>"
})
/* 1、动态组件 */
Vue.component('tab-home',{
template:`<div>
<div class="child_button">
<button v-for="childTab in childTabs" v-on:click="currentChildTab = childTab">{{childTab}}</button>
</div>
<component v-bind:is="childTabComponent"></component>
</div>`
,
data:function(){
return {
currentChildTab:'one',
childTabs:['one','two','three','four','five','six']
}
},
computed:{
childTabComponent:function(){
return 'tab-'+this.currentChildTab;
}
}
});
Vue.component('tab-info',{
template:"<div>info信心页展示信息</div>"
});
Vue.component('tab-location',{
template:"<div>location位置展示信息</div>"
});
new Vue({
el:".tab_area",
data:{
currentTab:'home',
tabs:['home','info','location']
},
computed:{
currentTabComponent:function(){
return 'tab-'+this.currentTab;
}
}
})
/* 1、动态组件 */
</script>
</body>
</html>
.
vue组件---动态组件之多标签页面的更多相关文章
- vue组件---动态组件&异步组件
(1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...
- elementUI的动态tabs页的使用，vue的动态组件的操作
elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Vuejs——（12）组件——动态组件
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- Vue.js动态组件
动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- Vue组件-动态组件
动态组件 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以让多个组件使用同一个挂载点,并动态切换: <div id="app6"& ...
- Vue实例 动态组件实现选项卡
动态组件 选项卡 有n种实现方法 哈哈哈哈 <style> #app{ width: 260px; height: 200px; background: #fff; box-shadow: ...
- 深入了解组件- -- 动态组件 & 异步组件
gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson11 一 在动态组件上使用keep-alive 在这之前我们已经有学习过用 ...
随机推荐
- GMT和CST的转换
GMT时间是格林尼治标准时间.CST时间是指包含中国.美国.巴西,澳大利亚四个时区的时间. 在javascript中默认CST是指美国中部时间,倘若在javascript中GMT转换CST则两者相差1 ...
- java UDP聊天与文件传输
package rgy.com.UDP3; import java.awt.Font; import java.awt.GridLayout; import java.awt.event.Action ...
- Android关于Task的一些实践之SingleTask, SingleInstance和TaskAffinity
上一篇文章粗略地介绍了一下关于Android中Task的基本知识.只是实践才是检验真理的唯一标准,所以.今天就来试验一下Task中的launchMode是否真的实现了文档所说的那样. 首先.定义三个A ...
- JAVA实现N皇后问题(回溯法)
package com.leetCode; /** * Follow up for N-Queens problem. Now, instead outputting board configurat ...
- 【bzoj4412】[Usaco2016 Feb]Circular Barn
先看成一条链 for一遍找位置 在for一遍算答案 #include<algorithm> #include<iostream> #include<cstring> ...
- java7-Fork/Join
Fork/Join 框架与传统线程池的区别采用“工作窃取”模式(work-stealing):当执行新的任务时它可以将其拆分分成更小的任务执行,并将小任务加到线程队列中,然后再从一个随机线程的队列中偷 ...
- 【HDU 1588】 Gauss Fibonacci
[题目链接] 点击打开链接 [算法] 要求 f(g(0)) + f(g(1)) + f(g(2)) + ... + f(g(n-1)) 因为g(i) = k * i + b 所以原式 = f(b) + ...
- bzoj1016 [JSOI2008]最小生成树计数——Kruskal+矩阵树定理
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1016 从 Kruskal 算法的过程来考虑产生多种方案的原因,就是边权相同的边有一样的功能, ...
- RDA CoreDump 实例
UMF进程的Coredump问题追踪: 通河code开机DUMP问题 现象: 开机Dump,原因:_MAINAPP_SW_Init()调用了Factory_Ver_Debug()内存溢出. 分析流程: ...
- codeforces GYM 100781A【树的直径】
先求出每棵树的直径,排个序,要想图的直径最小的话需要每棵树的直径中点像直径最大的树的直径中点连边,这样直径有三种情况:是直径最大的树的直径:a[tot]:是直径最大的树和直径第二大的树的半径拼起来+1 ...