javascript - 如何用vue实现二级菜单栏

问题描述

问 题

这是我的代码

<div class="menu-parent" v-for = "item in menu" :class="parentColor">
     <p v-text="item.name" class="top-title" @click="toggleShow($index)"></p>
     <ul v-show="menu[$index].child" class="menu-child">
          <li v-for="items in item.child" @click="childCheck($index)" >
                  <a v-text="items.name" :class="shoope"></a>
           </li>
     </ul>
</div>
<script>
import Menu from '../../libs/menu';
export default {
  data () {
    return {
      msg: '登录之后的主页面',
      menu:[],
      shoope:false,
      ishow:false,
      i:-1,
      parentColor:false
    }
  },
  ready(){
      this.menu = Menu.menu;
  },
  methods:{
      toggleShow:function($index){
        $('.menu-parent >ul').eq($index).slideToggle(500);
      },
      childCheck:function($index){
          $('ul li').eq($index).children('a').addClass('childclick');
      }
  }
}
</script>
<style>
.childclick{
    background: #FFFFFF;
    color: #4E8CEE;
}
.parentclick{
    background: #C0CFE0;
    color: #6684B5;
}
</style>

设计图是这样的

求各位大神指教

解决方案

你的代码有几个问题：

问题1：

:class= "parentColor" 

这里的parentColor在数据里面是false？如果你要显示某个class，思路应该是这么写：

:class= "{ 'xxxClass' : parentColor}" 

问题2：

<div class="menu-parent" v-for = "item in menu" > ... </div>

这里在外层div遍历menu，那会编译成下面的这样：

<div class="menu-parent"> 1... </div>
<div class="menu-parent"> 2... </div>
<div class="menu-parent"> 3... </div>
...

可能这样就不是你要的结构了

问题3：

<ul v-show="menu[$index].child"> ... </ul>

这里的v-show为何放了menu[$index].child，你的意图是？
v-show 是简单的切换元素的 CSS 属性 display。

问题4：

用Vue是为了避免直接操作dom结构，所以还是别这么写好，这里可以根据问题1的写法改为显示或者隐藏某个class

toggleShow:function($index){
    $('.menu-parent >ul').eq($index).slideToggle(500);
},
childCheck:function($index){
    $('ul li').eq($index).children('a').addClass('childclick');
}

优化了一下，你可以参考一下

这篇关于javascript - 如何用vue实现二级菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！