选项卡（精致版）

Posted 2021-08-24 Frazier@‘ ’

<template>
  <div class="box">
    <!--省市区-->
    <div class="addBody">
      <ul >
        <li v-for="(item,index) in head" :key="index"  v-bind:class="{act:active == index}" @click="active = index">{{item}}</li>
      </ul>
      <div v-for="(item,index) in content" :key="index" v-show="index == active">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Provinces",
  data() {
    return {
      active:0,
      head:['省','市','区'],
      content:['河北省','石家庄市','长安区'],
    };
  },
};
</script>

<style lang="scss" scoped>

  .addBody {
    width: 430px;
    height: 400px;
    border: 1px solid #cccccc;
    ul {
      height: 28px;
      line-height: 28px;
      display: flex;
      background-color: #F0F0F0;
      border: 1px solid #F0F0F0;
      li {
        width: 33.33%;
        height: 100%;
        text-align: center;
      }
    }
    ul>li.act{
        background-color: white;
    }
  }

</style>

效果图 ：