组件基础之动态tab组件
<template>
<div id="demo31">
<p>-----------------组件基础之动态tab组件一---------------------</p>
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>{{ tab }}</button> <component v-bind:is="currentTabComponent" class="tab"></component>
</div>
</template> <script>
export default {
components: {
tabhome: {
template: "<div>Home component<div>"
},
tabpost: {
template: "<div>Posts component<div>"
},
tabarchive: {
template: "<div>Archive component<div>"
}
},
data() {
return {
currentTab: "Home",
tabs: ["Home", "Post", "Archive"]
};
},
computed: {
currentTabComponent() {
return "tab" + this.currentTab.toLowerCase();
}
}
};
</script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px sollid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button .active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
demo2:
<template>
<div id="demo32">
<p>-----------------组件基础之动态tab组件二---------------------</p>
<button
v-for="(tab,index) in tabs"
v-bind:key="index"
v-bind:class="['tab-button', { active: currentIndex === index }]"
v-on:click="currentIndex = index"
>{{ tab }}</button> <component v-bind:is="currentTabComponent" class="tab"></component>
</div>
</template> <script>
export default {
components: {
tab_home: {
template: "<div>Home component<div>"
},
tab_post: {
template: "<div>Posts component<div>"
},
tab_archive: {
template: "<div>Archive component<div>"
}
},
data() {
return {
currentIndex:0,
tabs: ["Home", "Post", "Archive"]
};
},
computed: {
currentTabComponent() {
return 'tab_'+this.tabs[this.currentIndex].toLowerCase()
}
}
};
</script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px sollid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button .active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
https://blog.csdn.net/kingrome2017/article/details/80541680 vuejs2.0 组件基础动态组件 Tab选项卡插件
组件基础之动态tab组件的更多相关文章
- 组件基础(非父子组件传值)—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
- vue-music 关于基础组件 (Tab组件)
定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === ...
- 组件基础(参数校验和动态组件、v-once)—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- 前端框架之Vue(9)-组件基础&vue-cli
组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...
- extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)
在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
随机推荐
- sql语句查询结果中添加自增列
SELECT Row_Number() over ( order by getdate() ) as init , * FROM 表名
- 如何把SAP WebIDE里的Web项目同Github仓库连接起来
我们在SAP WebIDE里进行UI5应用开发时,当然也希望能将开发的代码纳入到github版本管理中去. 步骤其实非常简单. 右键点击WebIDE里UI5应用,git->Initialize ...
- linux服务器忘记密码操作
当重启镜像时候 看到这个界面的时候 按1 按1之后进入如下界面 红色区域有解释 按e是编译模式,我们按e OK 这里我们选择第二行按b 进入开发者模式,然后等待启动 然后更改密码
- Kafka的性能分析
都说Kafka的吞吐量很大,但是我一直不直到Kafka为何有如此大的吞吐量.最近在看Kafka权威指南,陆陆续续得到了如下结论: 1.分区:Kafka支持分区,这样就支持多个生产者和多个消费者同时请求 ...
- Image Processing and Analysis_15_Image Registration:HAIRIS: A Method for Automatic Image Registration Through Histogram-Based Image Segmentation——2011
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- pandas行转列、列转行、以及一行生成多行
楔子 笔者曾经碰到过两种格式的数据,当时确实把我难住了,最后虽然解决了,但是方法不够优雅,而且效率也不高,如果想高效率,那么就必须使用pandas提供的方法.而pandas作为很强的一个库,一定可以优 ...
- 最最常用的RAID
若转载请于明显处标明出处:http://www.cnblogs.com/kelamoyujuzhen/p/8980696.html RAID stands for Redundant Array of ...
- webSocket的场景应用
应用场景 服务器更新 前端页面也进行局部刷新,更新服务器端返回的信息 什么是webSocket? 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对 ...
- Oracle中查询表中数据的上次更新时间
目前找到的是以下方式,但是这种方式在表的数据量比较大的时候效率会比较慢. select to_char(scn_to_timestamp(max(ora_rowscn)),'YYYY-MM-DD HH ...
- mysql查询表中最后一条记录
查询全部的记录: select * from test_limit ; 查第一条记录: select * from test_limit limit 1; ...