自定义tabs切换显示不同内容(Vue)

喜欢ヅ旅行 2021-07-24 19:20 895阅读 0赞

使用方法:
    	(1)传入内容为标题的title数组
    	(2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引
    		根据索引展示不同内容

代码示例:

<template>
       <div class='tab'>
         <div class='tab-tit'>
             <span v-for='(item,index) in title' :key='index' :class='currentIndex === index?"on":""' @click="on(index)">{ { item}}</span>
         </div>
       </div>
    </template>
    
    <script>
    export default { 
      name:'tabControl',
      props:['title'],
      data(){ 
        return{ 
          currentIndex:0
        }
      },
      methods:{ 
          on(index)
          { 
              this.currentIndex=index;
              this.$emit('currentIndex',this.currentIndex)
          }
      }
    
    }
    </script>
    
    <style scoped>
    .tab{ 
        position:sticky;
        top:50px;
    }
    
    .tab-tit{ 
        display: flex;
        justify-content: space-evenly;
    }
    .tab-tit>span{ 
        padding-bottom: 5px ;
    }
    .on{ 
        color: #FF8E96;
        border-bottom: solid 2px #FF8E96;
    }
    
    </style>

效果图:  
![在这里插入图片描述][20200730110323155.png]

[20200730110323155.png]: /images/20210724/2943d4f08a21477989fb30360304f507.png

发表评论取消回复

表情：

评论列表（有 0 条评论，895人围观）

还没有评论，来说两句吧...

相关阅读

相关数据库根据查询的字段值不同显示不同内容

select case fs_type when 0 then '本地存储' when 1 then 'ftp存储' else '数据库存储' end as '存储方

超、凢脫俗/ 2023年10月18日 22:14/ 0 赞/ 350 阅读

相关 vue elementui 日历内容自定义

<el-calendar v-else v-model="toMonth"> <template slot="dateCell" slot-sc

向右看齐/ 2023年01月15日 03:39/ 0 赞/ 407 阅读

相关九、自定义Tab

现在流行的主界面都是底部有几个tab，点击切换到不同的页面，下面我们自定义这个tab控件。采用最简单的自定义控件的方法，继承自android自带控件，继承LinearLay

左手的ㄟ右手/ 2022年09月25日 04:27/ 0 赞/ 192 阅读

相关 JSTree 自定义图标不同节点显示不同图标

参见红色部分： arrays\[i\].iconSkin 是后台传的图标数据，分别是root A A1 A2

不念不忘少年蓝@/ 2022年06月09日 04:44/ 0 赞/ 592 阅读

相关 C#同一位置切换显示两个Panel内容

![990022-20161104175207721-828242263.png][] 如果两个panel重合在一起，点击不同按钮切换显示不同的panel，需要xxx.Bri

傷城~/ 2022年03月29日 15:36/ 0 赞/ 424 阅读

相关自定义tab(模拟tab效果)

实现效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

怼烎@/ 2022年03月01日 11:28/ 0 赞/ 286 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 347 阅读

相关自定义tabs切换显示不同内容(Vue)

使用方法: (1)传入内容为标题的title数组 (2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引根据索

喜欢ヅ旅行/ 2021年07月24日 19:20/ 0 赞/ 896 阅读

相关 css动画卡片翻转显示不同内容

做法: 两个div重叠,元素设置背面不可见属性,刚开始将第二个div绕y轴翻转180度不可见当鼠标放上父元素时,让两个子元素都旋转,设置第一个子元

清疚/ 2021年07月24日 19:17/ 0 赞/ 527 阅读

相关自定义tabs切换显示不同内容(React)

做法: (1)将要显示的内容作为插槽传入组件 (2)使用React.Children.map遍历插槽内容的标签属性获取标题栏内容 xx

不念不忘少年蓝@/ 2021年07月24日 13:05/ 0 赞/ 994 阅读