vue实现切换功能

<div id="content">
  <div id="nav">
    <ul>
      <li v-for="(item,index) in tabs" @click="tab(index)">{{item}}</li>
    </ul>
  </div>
  <div id="main">
      <main v-for="(cont,id) in mainContent" v-show="id==num">{{cont}}</main>
  </div>
</div>

<script>
export default {
  data() {
    return {
      tabs: ["数据统计", "数据分析", "标题三", "标题四", "标题五"],
      mainContent: ["内容一", "数据分析", "内容三", "内容四, "内容五"],
      num:1,
    };
  },
  methods: {
    tab(index){
      this.num=index;
    }
  },
};
</script>