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 在这之前我们已经有学习过用 ...
随机推荐
- SQLServer IP不能登录问题解决
最近项目项目需要,要在windows2008R2服务器上部署项目,可是客户那边服务器上SqlServer也没有安装,一切都要自己解决,所以我就找了个2008的版本,进行安装,安装过程没有遇到什么问题, ...
- git 在一台机器上配置多个账户
前提: 必须知道怎样配置git账户,请參考git官方教程:https://help.github.com/articles/generating-ssh-keys 这个教程能教你怎样生成ssh-key ...
- 64位win2008下IIS未开启32位支持导致DLL无法加载问题
部署一个WEB项目,在本机.本地服务器都没有问题,但部署到远程服务器以后,提示有个DLL无法加载: Server Error in '/' Application. Could not load fi ...
- mongodb配置主从模式
Mongodb的replication主要有两种:主从和副本集(replica set).主从的原理和mysql类似,主节点记录在其上的所有操作oplog,从节点定期轮询主节点获取这些操作,然后对自己 ...
- document.getElementsByClassName("head")[0].parentElement
document.getElementsByClassName("head")[0].parentElement
- android:模拟水波效果的自己定义View
Github地址:https://github.com/nuptboyzhb/WaterWaveView 欢迎Fork.欢迎Star 1.先看效果 watermark/2/text/aHR0cDovL ...
- SemaphoreSlim
https://msdn.microsoft.com/en-us/library/system.threading.semaphoreslim(v=vs.110).aspx Represents a ...
- dom小练习
dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...
- Java日期推迟计算、日期大小
/** * 日期推迟计算 * @param date * @param num * @return java.util.HashMap<java.lang.String,java.lang.St ...
- P4128 [SHOI2006]有色图
传送门 数学渣渣看题解看得想死Ծ‸Ծ 首先发现这玩意儿看着很像polya定理 \[L=\frac{1}{|G|}\sum_{i\in G}m^{w(i)}\] 然而polya定理只能用来求点的置换,边 ...