如何將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-的指令：

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