vue如何实现这样的tab切换

Question

vue菜鸟 请教如何实现

点击冰箱 出现 冰箱下的二级菜单 
点击酒柜 出现酒柜的二级菜单 冰箱的隐藏
以此类推

<div id="app">

        <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">{{itemCon}}</div>

        </div>

    </div>

<!--这里是js代码-->

<script type="text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        tabs: ["冰箱", "酒柜","菜多多"],

        tabContents: ["馨厨S系列","内容二","内容三"],

        num: 1

    },

    methods: {

        tab(index) {

            this.num = index;

        }

    }

});

</script>

这样写的话 冰箱智能绑定 馨厨S系列 其他两个无法写 写成数组 就无法显示了应该怎么改

Answer 1

看写我这个demo<template>&nbsp; <div>&nbsp; &nbsp; <!--<img src="./assets/logo.png">-->&nbsp; &nbsp; <header class="mod_header">&nbsp; &nbsp; &nbsp; <i class="music_logo">音乐</i>&nbsp; &nbsp; &nbsp; <a href="javascript:;" class="btn_download">下载APP</a>&nbsp; &nbsp; </header>&nbsp; &nbsp; <nav class="mod_nav" @click="goView">&nbsp; &nbsp; &nbsp; <a href="javascript:;" data-nav="Recom" data-index="0" :class="{current:isActive[0]}">推荐</a>&nbsp; &nbsp; &nbsp; <a href="javascript:;" data-nav="TopList" data-index="1" :class="{current:isActive[1]}">排行榜</a>&nbsp; &nbsp; &nbsp; <a href="javascript:;" data-nav="Search" data-index="2" :class="{current:isActive[2]}">搜索</a>&nbsp; &nbsp; &nbsp; <!--<a v-link="/HelloWorld">HelloWorld</a>-->&nbsp; &nbsp; </nav>&nbsp; &nbsp; <!-- 动态组件 -->&nbsp; &nbsp; <keep-alive>&nbsp; &nbsp; &nbsp; <component :is="view"></component>&nbsp; &nbsp; </keep-alive>&nbsp; </div></template><script>&nbsp; import Recom from '@/components/Recom'&nbsp; import TopList from '@/components/TopList'&nbsp; import Search from '@/components/Search'&nbsp; export default {&nbsp; &nbsp; name: 'app',&nbsp; &nbsp; data () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; view: 'Recom',&nbsp; &nbsp; &nbsp; &nbsp; isActive: [true, false, false]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; Recom,&nbsp; &nbsp; &nbsp; TopList,&nbsp; &nbsp; &nbsp; Search&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; goView (el) {&nbsp; &nbsp; &nbsp; &nbsp; let me = this&nbsp; &nbsp; &nbsp; &nbsp; me.view = el.target.attributes['data-nav'].nodeValue&nbsp; &nbsp; &nbsp; &nbsp; let dataIndex = el.target.attributes['data-index'].nodeValue//&nbsp; &nbsp;eslint-disable-next-line&nbsp; &nbsp; &nbsp;这个注释的是说明下面这行代码不用es6检查&nbsp; &nbsp; &nbsp; &nbsp; me.isActive.find((h, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // eslint-disable-next-line&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i == dataIndex) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.$set(this.isActive, i, true)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.$set(this.isActive, i, false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</script>