vue 选项卡

组件方式

<template>
  <div>
    <div class="bigbox">
      <div class="title">
        <div @click="tab(1)" :class="this.tabshow==1?'active':''">编制查询</div>
        <div @click="tab(2)" :class="this.tabshow==2?'active':''">JD负荷查询</div>
        <div @click="tab(3)" :class="this.tabshow==3?'active':''">承训负荷查询</div>
      </div>
      <hr />
      <div class="containerbox">
        <div v-show="tabshow==1">
         组件1/内容1
        </div>
        <div v-show="tabshow==2">
         组件2/内容2
        </div>
        <div v-show="tabshow==3">
          组件3/内容3
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabshow: 3,
    };
  },
  created() {},
  methods: {
    tab(val) {
      this.tabshow=val
    },
  },
};
</script>
<style scoped>
.bigbox .title {
  display: flex;
}
.bigbox .title div {
  padding: 10px 40px;
  border: 1px solid rgb(104, 97, 97);
  cursor: pointer;
}
.containerbox {
}
.active {
  background-color: #000;
  color: #ffff;
}
html,body{
	scroll-behavior:smooth;
}
</style>