Как связать класс 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

Если вы хотите перебрать внутри массива иконок, вы можете использовать шаблон с клиноремённой для директивы:

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