Vuejs add css class to ul li list from array

Question

I have someting like this array:

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

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

i want make li that will have this cssClass class name

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

i need this type output

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

Answer 1

Simply do

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

Here is a fiddle https://jsfiddle.net/mananvaghasiya/1ycvwwrb/4/ feel free to inspect list items to see the class name.

Answer 2

To bind key dynamically you can do like this

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

Or

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

Answer 3

You can use directive v-bind for this:

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

or in short:

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