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

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"


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

   
script:

    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 创建的对象绑定多个 class？

VueJS - How can I bind multiple class from object that created by v-for?

bind

class

vue.js