选项卡

image.png

<template>
  <div>
    <ol>
      <li :class="curIndex === index ? 'cur': ''" @click="handleCurLi(index)" v-for="(item, index) in arr" :key="index">{{item.hero}}</li>
    </ol>
    <ul>
      <li :class="curIndex === index ? 'cur': ''" v-for="(item, index) in arr" :key="index">{{item.coun}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  data () {
    return {
      curIndex: 0,
      arr: [{
        hero: '曹操',
        coun: '北魏'
      }, {
        hero: '刘备',
        coun: '蜀汉'
      }, {
        hero: '孙权',
        coun: '东吴'
      }]
    }
  },
  methods: {
    handleCurLi (index) {
      this.curIndex = index
    }
  }
}
</script>

<style>
  li {
    list-style-type: none;
    border: 1px solid slategrey;
    box-sizing: border-box;
  }
  ol, ul {
    display: flex;
  }
  ol li {
    width: 100px;
    height: 50px;
  }
  ol li.cur {
    background: slateblue;
  }
  ul li {
    width: 300px;
    height: 250px;
    display: none;
  }
  ul li.cur {
    display: block;
  }
</style>