vue简易tab选项卡

<template>
  <div>
    <ul>
      <li
        :class="currentIndex == index ? 'active' : ''"
        v-for="(item, index) in list"
        :key="item.id"
        @click="toggle(index)"
      >
        {{ item.title }}
      </li>
    </ul>
    <div
      v-for="(item, index) in list"
      v-show="currentIndex == index"
      :key="item.id"
    >
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0, // 选项卡当前的索引
      list: [
        {
          id: 1,
          title: "apple",
          content: "我是一个苹果"
        },
        {
          id: 2,
          title: "orange",
          content: "我是一个橙子"
        },
        {
          id: 3,
          title: "lemon",
          content: "我是一个柠檬"
        }
      ]
    };
  },
  methods: {
    toggle(index) {
      // 在这里实现选项卡切换操作：本质就是操作类名
      // 如何操作类名？就是通过currentIndex
      this.currentIndex = index;
    }
  }
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
ul {
  overflow: hidden;
}
ul li {
  box-sizing: border-box;
  padding: 0;
  float: left;
  width: 100px;
  height: 45px;
  line-height: 45px;
  list-style: none;
  text-align: center;
  cursor: pointer;
}
.active {
    border-bottom: 1px solid pink;
}
.current {
  width: 300px;
  height: 300px;
  text-align: center;
  font-size: 30px;
  line-height: 300px;
  border: 1px solid red;
}
</style>