Vue实现选项卡切换效果

HTML:

<ul>
   <li v-for="(item,index) in tabs" :class="{active:index == num}"@click="tab(index)">
      {{item}}
   </li>
</ul>
<div class="tabCon">
   <!-- <div v-for='(itemCon,index) in tabContents' v-show=" index == num">
 8       {{itemCon}}
 9    </div> -->
   <div  v-show=" 0 === num">我是内容一</div>
   <div  v-show=" 1 === num">我是内容二</div>
   <div  v-show=" 2 === num">我是内容三</div>
</div>

JS:

<script type="text/javascript">
            
            export default{
                data () {
                        return {
                            tabs: ["标题一", "标题二","标题三"],
                            // tabContents: ["内容一", "内容二","内容三"],
                            num: 0
                        }
                    },
                    methods: {
                        tab(index) {
                            this.num = index;
                        }
                    }
                }
</script>