如何在 table 行元素中绑定多个 css 类？

Question

我是 Vuejs2.0 的新手，正在尝试将多个 css 类绑定到 table 行元素。

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>

如何在 table 行元素中绑定多个 css 类？

How to bind multiple css classes in a table row element?

javascript

vue.js

vuejs2