vue如何實(shí)現(xiàn)這樣的tab切換

vue菜鳥(niǎo) 請(qǐng)教如何實(shí)現(xiàn)

點(diǎn)擊冰箱出現(xiàn) 冰箱下的二級(jí)菜單
點(diǎn)擊酒柜出現(xiàn)酒柜的二級(jí)菜單冰箱的隱藏
以此類推

<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系列","內(nèi)容二","內(nèi)容三"],
        num: 1
    },
    methods: {
        tab(index) {
            this.num = index;
        }
    }
});
</script>

這樣寫的話冰箱智能綁定馨廚S系列其他兩個(gè)無(wú)法寫寫成數(shù)組就無(wú)法顯示了應(yīng)該怎么改

回答

編輯回答

祉小皓

點(diǎn)擊一級(jí)菜單的時(shí)候，改變二級(jí)菜單的綁定數(shù)據(jù)就行。。二級(jí)菜單用一個(gè)v-for循環(huán) 來(lái)渲染。

2018年5月27日 14:55

編輯回答

耍太極

看寫我這個(gè)demo

<template>
  <div>
    <!--<img src="./assets/logo.png">-->
    <header class="mod_header">
      <i class="music_logo">音樂(lè)</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>
    <!-- 動(dòng)態(tài)組件 -->
    <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     這個(gè)注釋的是說(shuō)明下面這行代碼不用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>

2017年9月9日 23:39

編輯回答