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 在这之前我们已经有学习过用 ...
随机推荐
- 12.解决CCScale9Sprite或者CCControlButton无法使用的问题。
问题: 使用CCScale9Sprite或者CCControlButton等控件的时候,会出现无法识别的情况. 解决方式: 1.include对应的头部,即#include "cocos-e ...
- 模式识别之车牌识别---一个开源车牌识别项目easypr
http://doc.okbase.net/subconscious/archive/105312.html https://github.com/liuruoze http://www.cnblog ...
- SNAPSHOTTING
/etc/redis.conf ################################ SNAPSHOTTING ################################## Sav ...
- Ubuntu 16.04 + github page + hexo 搭建博客
1. 安装nodejs: sudo apt-get install nodejs-legacy 2.安装nvm : wget -qO- https://raw.github.com/creatio ...
- 【Poj1090】Chain
Chain Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3414 Accepted: 1126 Description ...
- 【SCOI 2007】 降雨量
[题目链接] 点击打开链接 [算法] 线段树 此题细节很多,写程序时要细心! [代码] #include<bits/stdc++.h> using namespace std; #defi ...
- bzoj1854 [Scoi2010]游戏——匈牙利算法
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1854 这题...据说可以用并查集做,但没有去看... 用二分图匹配的话,就把装备和它的两个属 ...
- oracle 统计/分析函数
Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是对于每个组返回多行,而聚合函数对于每个组只返回一行. 语法: Sql代码 <analytic ...
- openstack network:dhcp binding fail
- jquery easyui 显示和关闭数据加载的遮罩
$('#yearReportTable').datagrid('loading');//打开等待div $('#yearReportTable').datagrid('loaded');//关闭等待d ...