li背景切换颜色

<template>
  <div class="about"> 
    <ul>
      <li v-for="(item,index) in topNav" :key="index"
          :class=" flag==index ? 'choosed' : 'choosed1' " @click="getTableData(item,index)">
        {{item.title}}
      </li>
    </ul>
    {{this.tableData}}
  </div>
</template>
<script>
   export default {
       data () {
          return{
              moneyList: [10, 100, 200, 300, 400, 500, 600],
              flag: -1,
              topNav:[
                  {id:1,title:'哈哈哈'},
                  {id:2,title:'啦啦啦'},
                  {id:3,title:'略略略'},
                  {id:4,title:'呵呵呵'},
                  {id:5,title:'嘿嘿嘿'}
              ],
              tableData: '',
          }
       },
       methods: {
           choosePay (index) {
               let t = this
               t.flag = index
           },
           getTableData(item,index) {
               // 头部-这里进行获取表格数据
               this.tableData = '';
               this.tableData = item;
               this.flag = index;
           },
       }
   }
</script>
<style scoped>
  ul,li{
    display: inline-block;
  }
  li{
    width:29%;
    margin:5px 5px;
    padding:10px 0;
    font-size: 0.8em;
    text-align: center;
    border-radius: 5px;
  }
  .choosed{
    color: #fff;
    border: 1px solid #0e93f6;
    background-color: #0e93f6;
  }
  .choosed1{
    color: #7c7e7e;
    border: 1px solid #7c7e7e;
  }
</style>