javascript - 如何在表格行元素中绑定(bind)多个CSS类？

Question

我是 Vuejs2.0 的新手，并尝试将多个 css 类绑定(bind)到表行元素。

Here's my view (and my attempt):

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

Here's my model/data (snipped for brevity):

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>