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

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>

如何使这项工作？谢谢！

来源

2017-02-20 redshift

如果你想你的图标阵列里面循环，您可以使用模板与V-的指令：

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

2017-02-20 15:38:15

回答