vue 最简单的tab选项卡

选项卡

概述

本tab选项卡demo只实现基本的tab选项卡切换，具体样式请依据项目进行修改优化

效果图

代码demo

<!-- 产品详情 ：产品介绍、产品规格、产品售后 -->
<template>
  <div class="intro">
      <ul class="tabs">
        <li class="tab" v-for="(item,index) in tabs" :key="index" :class="{current:index==current}" @click="current=index">{{item.title}}</li>
      </ul>
      <div class="con">
        <div class="con_box" v-if="current==0">
          产品简介
        </div>
        <div class="con_box" v-if="current==1">
          产品规格
        </div>
        <div class="con_box" v-if="current==2">
          产品售后
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      current:0,
      tabs:[
        {
          title:'产品简介'
        },
        {
          title:'产品规格'
        },
        {
          title:'产品售后'
        },
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.intro{}
  .tabs{
    display: flex;
    .tab{
      color: #283242;
      cursor: pointer;
      padding:4px 10px;
      &.current{
        color:#1870FF ;
      }
    }
  }
</style>

使用id的选项卡

template

<ul class="tabs">
  <li class="tab" v-for="(item, index) in tabs" :key="index" :class="{ current: item.tid == currentTid }" @click="currentTid = item.tid">{{ item.title }}</li>
</ul>
<div class="con">
  <div class="con_box" v-if="currentTid == 't0'">产品简介</div>
  <div class="con_box" v-if="currentTid == 't1'">产品规格</div>
  <div class="con_box" v-if="currentTid == 't2'">产品售后</div>
</div>

data

currentTid: 't0',
tabs: [
  {
    title: "产品简介",
    tid:'t0'
  },
  {
    title: "产品规格",
    tid:'t1'
  },
  {
    title: "产品售后",
    tid:'t2'
  },
],

style

.tabs {
	display: flex;
	.tab {
	  color: #283242;
	  cursor: pointer;
	  padding: 4px 10px;
	  &.current {
	    color: #1870ff;
	  }
	}
}