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 在这之前我们已经有学习过用 ...
随机推荐
- qq 空间视频地址 的 有效期 403
大约 在24-48小时内 200 http://vwecam.gtimg.com/1006_aa21a85ef3d245f19535cf2ab941ccbb.f0.mp4?ptype=http& ...
- unigui组件中client javascript delphi组件之间的操作
UniLabel组件: function OnClick(sender, e){ MainForm.UniLabel1.setText('Click!');} function Onmousemove ...
- 二分lower_bound()与upper_bound()的运用
<span style="color:#6633ff;">/* G - 二分 Time Limit:2000MS Memory Limit:32768KB 64bit ...
- Codeforces Round #311 (Div. 2) D - Vitaly and Cycle
D. Vitaly and Cycle time limit per test 1 second memory limit per test 256 megabytes input standard ...
- SICP习题练习
练习1.6 new-if的三个参数会先被执行,这样就会无限循环下去 练习1.7 (define (sqrt-iter last-guess guess x) (if (good-enough? las ...
- bzoj2115 [Wc2011] Xor——高斯消元 & 异或线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2115 异或两次同一段路径的权值,就相当于没有走这段路径: 由此可以得到启发,对于不同的走法, ...
- iOS核心动画以及UIView动画的介绍
我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些 ...
- 手机访问PC网站自动跳转到手机网站代码
方法一: <script type="text/javascript"> try { var urlhash = window.location.hash; if (! ...
- 栗染-Jsp编码常见问题
如图在我们新建一个jsp的时候想给自己的页面加一个中文就会出现如图所示的问题 遇到这种情况一般是选第二个或者 将<%@ page language="java" import ...
- bzoj 1578: [Usaco2009 Feb]Stock Market 股票市场【背包】
参考:https://blog.csdn.net/mars_ch/article/details/53011234 我背包真是好不熟练啊-- 第一天买了第三天卖相当于第一天买了第二天卖第二天再买第三天 ...