<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组件的更多相关文章

  1. 组件基础(非父子组件传值)—Vue学习笔记

    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...

  2. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  3. vue-music 关于基础组件 (Tab组件)

      定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === ...

  4. 组件基础(参数校验和动态组件、v-once)—Vue学习笔记

    最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...

  5. 前端框架之Vue(9)-组件基础&vue-cli

    组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)

    在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...

  7. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  8. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  9. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

随机推荐

  1. sql语句查询结果中添加自增列

    SELECT Row_Number() over ( order by getdate() ) as init , * FROM 表名

  2. 如何把SAP WebIDE里的Web项目同Github仓库连接起来

    我们在SAP WebIDE里进行UI5应用开发时,当然也希望能将开发的代码纳入到github版本管理中去. 步骤其实非常简单. 右键点击WebIDE里UI5应用,git->Initialize ...

  3. linux服务器忘记密码操作

    当重启镜像时候 看到这个界面的时候 按1 按1之后进入如下界面 红色区域有解释 按e是编译模式,我们按e OK 这里我们选择第二行按b 进入开发者模式,然后等待启动 然后更改密码

  4. Kafka的性能分析

    都说Kafka的吞吐量很大,但是我一直不直到Kafka为何有如此大的吞吐量.最近在看Kafka权威指南,陆陆续续得到了如下结论: 1.分区:Kafka支持分区,这样就支持多个生产者和多个消费者同时请求 ...

  5. Image Processing and Analysis_15_Image Registration:HAIRIS: A Method for Automatic Image Registration Through Histogram-Based Image Segmentation——2011

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  6. pandas行转列、列转行、以及一行生成多行

    楔子 笔者曾经碰到过两种格式的数据,当时确实把我难住了,最后虽然解决了,但是方法不够优雅,而且效率也不高,如果想高效率,那么就必须使用pandas提供的方法.而pandas作为很强的一个库,一定可以优 ...

  7. 最最常用的RAID

    若转载请于明显处标明出处:http://www.cnblogs.com/kelamoyujuzhen/p/8980696.html RAID stands for Redundant Array of ...

  8. webSocket的场景应用

    应用场景 服务器更新 前端页面也进行局部刷新,更新服务器端返回的信息 什么是webSocket? 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对 ...

  9. Oracle中查询表中数据的上次更新时间

    目前找到的是以下方式,但是这种方式在表的数据量比较大的时候效率会比较慢. select to_char(scn_to_timestamp(max(ora_rowscn)),'YYYY-MM-DD HH ...

  10. mysql查询表中最后一条记录

    查询全部的记录:            select * from test_limit ; 查第一条记录:             select * from test_limit limit 1; ...