vue列表如何同时带条件地绑定两个class属性？

Question

vue.1.0.28,我要渲染形成类似如下代码，即列表中分为两种数据，level1/level2，但任何时侯只有一个active项。

<li class="level1 active">大雪系列</li>
<li class="level1">晓雪系列</li>
<li class="level2">花河系列</li>
<li class="level2">维雪系列</li>
<li class="level1">红石系列</li>

数据部分如下：

data: {
    current:0,  
    sort_list:[
       {"MaterTypeName": "大雪系列", "Level": "1"}, 
       {"MaterTypeName": "晓雪系列", "Level": "1"},
       {"MaterTypeName": "花河系列", "Level": "2"}
       {"MaterTypeName": "维雪系列", "Level": "2"}
       {"MaterTypeName": "红石系列", "Level": "1"}
    ],
} 

请问v-for那一句怎么写？

//以下是错的：
<li v-for="el in sort_list" v-bind:class="[ 'active': ($index==sortCurrent),("level"+el.Level) ]" >

Answer 1

<ul id="el">
    <li v-for="el in sort_list"
        :class="[ 'level'+el.Level,  { 'active': $index == sortCurrent } ]"
    > {{ el.MaterTypeName }}</li>
</ul>

new Vue({
    el:'#el',
    data:{
        sortCurrent: 0,  
        sort_list:[
            {"MaterTypeName": "大雪系列", "Level": "1"}, 
            {"MaterTypeName": "晓雪系列", "Level": "1"},
            {"MaterTypeName": "花河系列", "Level": "2"},
            {"MaterTypeName": "维雪系列", "Level": "2"},
            {"MaterTypeName": "红石系列", "Level": "1"}
        ],
    }
})

这样就可以了

Answer 2

写成这样：

[($index==sortCurrent?"active":""),("level"+el.level)]

或者这样(vue1.0.19+)

[{"active":($index==sortCurrent)},("level"+el.level)]

试试

Answer 3

我这边目前版本是v2.1.3 不过这个写法你可以试试

<li v-for="(el,index) in sort_list" :class=[{"active":(index==current)},("level"+el.Level)]>{{ el.MaterTypeName }}</li>

Answer 4

<li v-for="(el,index) in sort_list" :class="[ 'level'+el.Level, { 'actives': index == current } ]" @click='changeSingClass(index)'>{{el.MaterTypeName}}</li>

current:-1,

    sort_list:[
     {MaterTypeName:"大雪系列",Level: "1"}, 
     {MaterTypeName:"晓雪系列",Level: "1"},
     {MaterTypeName:"花河系列",Level: "2"},
     {MaterTypeName:"维雪系列",Level: "2"},
     {MaterTypeName:"红石系列",Level: "1"}
    ],
    
   changeSingClass(index){
  this.current=index;
},

Answer 5

以下是官方文档中的实例

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">