vue切換tab樣式

像這種結(jié)構(gòu)，點(diǎn)擊切換tab樣式該怎么判斷？

html:

<li v-for="(menu,n) in menus" :key="n"">
  <router-link :to="menu.sub?'':menu.href" > {{menu.title}}

數(shù)據(jù)結(jié)構(gòu)：

menus: [{
  title: '百度',
  href: 'www.baidu.com',
},{
  title: '開發(fā)手冊(cè)',
  href: 'docs.segmentfault.com',
},{
  title: 'segmentfault',
  href: 'segmentfault.com',
  sub: [{
    title: '問答',
    href: '/questions',
    },{
    title: '專欄',
    href: '/blogs',
    },{
    title: '提問題',
    href: '/ask',
  }]
}]

css樣式：

.avtive {
  background: #f3f3f3;
}