vue 2.0 怎样判断class的有无来实现另一个元素的样式?

Question

先上图

介绍: 用vue2.0+element-ui来实现的 """"手风琴效果""""

问题: 当'仪表板'打开的时候(判断条件为有了'is-active'),对应的'menu-list-title'加上样式'menu-list-             active',我自己创建了一个对象'menuListActive'通多判断他为true还是false来显示class,但是怎样判断'is-active'的有无,或者说有更好的办法?
简单点就是判断有class 'is-active'就给其子元素添加'color'和'background'

求大神带!!!

Answer 1

其实可以直接用CSS实现：

.menu-list .sub-menu-list {
    display: none;
}

.menu-list.menu-list-active .sub-menu-list {
    display: block;
}

带有.menu-list的子菜单默认不显示，如果.menu-list同时带有.menu-list-active，则显示其下的子菜单。

Update

刚才看错了要求，如果是这样的话，先发一下文档：
http://element.eleme.io/#/en-...

文档里说el-collapse组件的value值，在手风琴模式下，为当前活动的面板，所以可以将这个值绑定到变量ActivePanel，然后在.menu-list-title那里判断ActivePanel是否和当前项匹配。

<el-collapse accordin class="menu-main" :value="activePanel">
    <el-collapse-item class="menu-list" v-for="menu in menus">
        <div class="menu-list-title" slot="title" :class="{'menu-list-active': activePanel == menu.outListName}">
        <!-- 此处 == menu.outListName我暂时不确定是否正确 -->
            <i :class="menu.icon" class="menu-icon"></i>
            {{menu.outListName}}
            <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
        </div>
        <div v-for="inlist in menu.inLists" class="sub-menu-list">{{inlist.inListName}}</div>
    </el-collapse-item>
</el-collapse>

然后在JS部分的data里加上

data() {
    return {
        activePanel: ''
    };
}

Answer 2

先在data里面定义
`data () {

return {
  collapse:false
}

}
`
点击展开菜单添加is-active，同时将collapse变成true,然后在你想增加类名的dom上加上:class="{'classA':collapse}"，类名classA在css里面添加样式

Answer 3

把menuListActive改称为一个方法, el-collapse中增加v-model="activeName"

methods: {
    menuListActive: function(name) {
        if(name == this.activeName) {
            return {类名或属性}
        }
    }
}