データオブジェクトのプロパティをDOM要素の属性にバインド

Question

私はVue.jsの初心者です私はHTMLとJSファイルに次のコード行を持っている：

HTML

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

JS

var app = new Vue({ 
    el: '#app', 
    data: { 
    items: [ 
     { 
     className: 'item-1', 
     text: 'Item 1' 
     }, 
     { 
     className: 'item-2', 
     text: 'Item 2' 
     }, 
     { 
     className: 'item-3', 
     text: 'Item 3' 
     } 
    ] 
    } 
}) 

私はクラス属性に各classNameの値をバインドされて起こるしたいです各DOM要素の私は誰かが私にこれを修正することを願っています。 v-bindを使用している場合

Answer 1

あなたがプロパティまたはオブジェクトのいくつかの種類を使用したいと思うでしょうVue already assumesので、{{...}}構文を使用する必要はありません。

だからできる出力例だけで、このような各classNameの値について：

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

または簡略版：

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

それとも

クラスは常に item-iのパターンに従うしようとしている場合、 ：

<li v-for="item, i in items" :class="`item-` + i">{{item.text}}</li>