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>

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

1 个答案: