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>

  <div>

    <!--<img src="./assets/logo.png">-->

    <header class="mod_header">

      <i class="music_logo">音乐</i>

      <a href="javascript:;" class="btn_download">下载APP</a>

    </header>

    <nav class="mod_nav" @click="goView">

      <a href="javascript:;" data-nav="Recom" data-index="0" :class="{current:isActive[0]}">推荐</a>

      <a href="javascript:;" data-nav="TopList" data-index="1" :class="{current:isActive[1]}">排行榜</a>

      <a href="javascript:;" data-nav="Search" data-index="2" :class="{current:isActive[2]}">搜索</a>

      <!--<a v-link="/HelloWorld">HelloWorld</a>-->

    </nav>

    <!-- 动态组件 -->

    <keep-alive>

      <component :is="view"></component>

    </keep-alive>

  </div>

</template>

<script>

  import Recom from '@/components/Recom'

  import TopList from '@/components/TopList'

  import Search from '@/components/Search'

  export default {

    name: 'app',

    data () {

      return {

        view: 'Recom',

        isActive: [true, false, false]

      }

    },

    components: {

      Recom,

      TopList,

      Search

    },

    methods: {

      goView (el) {

        let me = this

        me.view = el.target.attributes['data-nav'].nodeValue

        let dataIndex = el.target.attributes['data-index'].nodeValue

//   eslint-disable-next-line     这个注释的是说明下面这行代码不用es6检查

        me.isActive.find((h, i) => {

          // eslint-disable-next-line

          if (i == dataIndex) {

            me.$set(this.isActive, i, true)

          } else {

            me.$set(this.isActive, i, false)

          }

        })

      }

    }

  }

</script>