vue 实现简单的tab切换

<template>
    <div>
        <ul class="tab">
            <li v-for="(item,index) in review" :key="index" :id="item.id" 
            :class="{'sever':titletStyle==index}" 
            @click="onli(index,item.id)">
                {{item.name}}
                <div :class="{'select':titletStyle==index}">
                    {{item.name}}
                </div>
                </li>
        </ul> 
    </div>
</template>

<script>
export default {
  data() {
    return {
      titletStyle:0,
      review: [
        { id: "1", name: "支部党员大会" },
        { id: "8", name: "党课" },
        { id: "3", name: "组织生活会" },
        { id: "4", name: "民主评议党员" },
        { id: "2253028057613312", name: "主题党日" }
      ]
    };
  },
   methods: {
    onli(ind, e) {
      //考评项目

      this.titletStyle = ind;
    //   this.form.classificationId = e; //取得考评项目得名称,用于搜索
    //   this.form.quarter = "0"; //切换的时候后面的变成全年度
    },
   }
};
</script>

<style>
ul li {
  font-size: 14px;
  float: left;
  cursor: pointer;
  padding: 7px 20px;
  list-style: none;
  position: relative;
}

ul.tab li {
  border-radius: 5px;
  margin: 0 0 20px 20px;
  background: #e8e8e8;
}
ul.tab li.sever {
  background: #42a6d8;
  color: white;
}
ul.tab li>div{
 width: 250px;
 height: 300px;
 text-align: center;
 line-height: 300px;
 color: #ff0000;
 border: 1px solid #aeaeae;
 position: absolute;
 top:35px;
 left: 0;
 display: none;
}
ul.tab li>div.select{
    display: block;
}
</style>