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 在这之前我们已经有学习过用 ...
随机推荐
- Class 与 new的配合使用
class Type{ // 定义新的类型Type /// ...... }; Type a; Type b; // 像int a; int b;那样使用, 定义a和b为Type类型的变量 in ...
- Brackets常用插件
Emmet插件:https://github.com/emmetio/brackets-emmet AngularJS插件:https://github.com/angular-ui/AngularJ ...
- 使用-Wl直接向ld传递参数
gcc -Wl, key1, value1, key2, value2, key3, value3 包括-Wl在内全部都是以逗号分隔. 上面等价于: ld key1=value1 key2=value ...
- C中 数组和指针的异同
数组在很多情况下是和指针等价的,数组的下标运算和指针的解引用也有等价形式:arr[i] == *(arr + 1):但是也有一些情况下数组和指针是不一样的:extern int arr[]; exte ...
- android简易双屏支持【转】
本文转载自:http://blog.csdn.net/sfrysh/article/details/7463339 抱歉,之前说xorg的exa更新的时候恐怕一直不会更新了,没有做xorg开发了.转向 ...
- Android下拉刷新
以下是我自己花功夫编写了一种非常简单的下拉刷新实现方案,现在拿出来和大家分享一下.相信在阅读完本篇文章之后,大家都可以在自己的项目中一分钟引入下拉刷新功能 最近项目中需要用到ListView下拉刷新的 ...
- BZOJ_4802_欧拉函数_MR+pollard rho+欧拉函数
BZOJ_4802_欧拉函数_MR+pollard rho+欧拉函数 Description 已知N,求phi(N) Input 正整数N.N<=10^18 Output 输出phi(N) Sa ...
- bzoj 1645: [Usaco2007 Open]City Horizon 城市地平线【线段树+hash】
bzoj题面什么鬼啊-- 题目大意:有一个初始值均为0的数列,n次操作,每次将数列(ai,bi-1)这个区间中的数与ci取max,问n次后元素和 离散化,然后建立线段树,每次修改在区间上打max标记即 ...
- 慕课网6-4 编程练习：jQuery选择器中的过滤器
6-4 编程练习 结合所学的jQuery过滤器知识,实现如下图所示的隔行换色效果 任务 使用jQuery的.css()方法设置样式,语法css('属性 '属性值') 使用:odd和:even过滤器实现 ...
- （DP）51NOD 1085 背包问题
在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. Input 第1行,2个整数 ...