web-dev-qa-db-ja.com

VueJS-v-forによって作成されたオブジェクトから複数のクラスをバインドするにはどうすればよいですか？

私はそれをこのようにしたかった：

<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/

非オブジェクト形式：class = "v.name"を使用して、v-forで計算された値をバインドできます。

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'
    }]
  }
})

しかし、オブジェクト形式で適用しようとすると、エラーが発生します。どうすればいいですか？

classvue.jsbind
7
yukinari

このようなものを試してください: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>
12
Nikola Spalevic