亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue如何實現這樣的tab切換

vue如何實現這樣的tab切換

慕尼黑8549860 2019-02-20 14:18:16
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系列 其他兩個無法寫 寫成數組 就無法顯示了應該怎么改
查看完整描述

1 回答

?
達令說

TA貢獻1821條經驗 獲得超6個贊

看寫我這個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>


查看完整回答
反對 回復 2019-02-24
  • 1 回答
  • 0 關注
  • 558 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號