如何将CSS类绑定到HTML代码标记中？

Question

我有这样的数据：

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

我希望将css值绑定到HTML <code>元素中的视图，并进行格式化和呈现：

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

我尝试使用Vuejs2.0：

<code>%lt;i class="fa" :class="'fa-' + icon.css">&lt;/i&gt;</code>

不幸的是，DOM的呈现方式如下：

<i class="fa" :class="'fa-' + icon.css"></i>

如何使这项工作？谢谢！

Answer 1

如果要在图标数组中进行迭代，可以使用带有v-for指令的模板：

<template v-for="icon in icons">
    <i class="fa fa-{{ icon.css }}></i>
</template>