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

我是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" }
        ]
    }
});

我如何才能成功地渲染？谢谢您。

最佳答案

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

关于javascript - 如何在表行元素中绑定(bind)多个CSS类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42346817/