Vuejs将css类添加到数组的ul li列表中

Question

我喜欢这个数组：

items : [
   {
      cssClass : 'item1'
      text : 'some text 1'
   }

   {
      cssClass : 'item2'
      text : 'some text 2'
   }
]

我想要make li将拥有这个cssClass类名

<ul>
  <li v-for="item in items" class="{{item.className}}">{{item.text}}</li> 
</ul>

我需要这种类型的输出

<ul>
    <li class="item1">some text 1</li>
    <li class="item2">some text 2</li>
</ul>

Answer 1

简单地做

<ul>
  <li v-for="item in items" :class="item.cssClass">{{item.text}}</li> 
</ul>

这是一个小提琴https://jsfiddle.net/mananvaghasiya/1ycvwwrb/4/随时检查列表项以查看类名。

Answer 2

要动态绑定密钥，您可以这样做

 <li v-for="item in items" :class="{[item.cssClass] : true}">{{item.text}}</li>

或者

  <li v-for="item in items" :class="item.cssClass">{{item.text}}</li> 

Answer 3

您可以使用指令v-bind：

<ul>
  <li v-for="item in items" v-bind:class="item.className">{{item.text}}</li> 
</ul>

或简称：

<ul>
  <li v-for="item in items" :class="item.className">{{item.text}}</li> 
</ul>