在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue如何實現(xiàn)二級菜單與一級菜單聯(lián)動

vue如何實現(xiàn)二級菜單與一級菜單聯(lián)動

clipboard.png
設計圖如此，要求為每個一級菜單點擊都會有二級菜單彈出，如未選擇二級菜單則默認一級菜單是二級菜單第一項，這個題是需要自己寫假數(shù)據(jù)去做的，始終沒想好怎么做數(shù)據(jù)會更加方便去循環(huán)列表，甚至會想到for循環(huán)一級菜單中再for循環(huán)二級菜單，求大神解答，最好附贈代碼

回答
編輯回答
夢若殤

兩層for循環(huán)沒毛病

2017年2月24日 08:07
編輯回答
浪婳

主要是思路，代碼不一定這樣寫

<template>
  <first v-for="(item,index) in list" @click="showIndex === index?(showIndex = -1):(showIndex = index)" :class="{showSecond:showIndex === index}">
    <second v-for="(v,i) in item.vList" @click="item.value = v" :class="{selected:(item.value === v || (item.value === '' && i === 0))}" @click="item.value = v"></second>
  </first>
</template>  

<script>
  ...
  data(){
    return {
      showIndex: -1,
      list: [{
        label: '金重范圍',
        value: '',
        vList: ['0-0.99', '1-2.99'],
      }, {
        label: '成色',
        value: '',
        vList: ['18K金', '24K金']
      }]
    }
  }
  ...
</script>
2017年5月24日 17:14