VueJS - 如何从v-for创建的对象绑定多个类？

Question

我想这样做:

<ul>
  <li class="aaa active">text-aaa</li>
  <li class="bbb">text-bbb</li>
  <li class="ccc">text-ccc</li>
</ul>

这是代码.https://jsfiddle.net/qwvwsgb9/

我可以使用非对象格式绑定由v-for计算的值:class ="v.name"

HTML

<div id="app">
  <ul>
    <li v-for="v, i in listAry" :class="{v.name:true,active:active==i}">{{ v.text }}</li>
  </ul>
</div>

脚本:

let vm = new Vue({
  el: "#app",
  data: {
    active:0,
    listAry: [{
      name: 'aaa',
      text: 'text-aaa'
    }, {
      name: 'bbb',
      text: 'text-bbb'
    }, {
      name: 'ccc',
      text: 'text-ccc'
    }]
  }
})

但只要我尝试以对象格式应用它,就会发生错误.我该怎么做？

Answer 1

尝试这样的事情:class ="[{active:active == i},v.name]"

<div id="app">
  <ul>
    <li v-for="v, i in listAry" :class="[{ active: active === i }, v.name]">
      {{ v.text }}
    </li>
  </ul>
</div>