テーブルの行要素で複数のCSSクラスをバインドするにはどうすればよいですか？

Question

私はVuejs2.0が新しく、複数のCSSクラスを表の行要素にバインドしようとしています。

は、ここに私のビュー（と私の試み）です：

<tr v-for="icon in icons"> 
    <td><i class="fa fa-" v-bind:class="icon.css"></i></td> 
    <td>{{icon.name}}</td> 
</tr> 

CSSクラスを持つtd要素が正常になるようにレンダリングする必要があります

<td><i class="fa fa-car"></i></td> 

私のモデル/データは以下の通りです（簡潔にするために抜粋）：

new Vue({ 
    el: '#app', 
    data: { 
     icons: [ 
      { "name": "Car", "css": "car" }, { "name": "Airplane", "css": "airplane" } 
     ] 
    } 
}); 

どのように私はこれに成功し、レンダリングになるだろうか？ありがとうございました。

Answer 1

<tr v-for="icon in icons"> 
    <td><i class="fa" :class="'fa-' + icon.css"></i></td> 
    <td>{{icon.name}}</td> 
</tr> 

それとも

<tr v-for="icon in icons"> 
    <td><i :class="'fa fa-' + icon.css"></i></td> 
    <td>{{icon.name}}</td> 
</tr>