如何将 CSS class 绑定到 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>

How to bind CSS class into an HTML code tag?