如何将 CSS 类绑定到 HTML 代码标签中? [英] How to bind CSS class into an HTML code tag?

问题描述

我有这样的数据:

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

我想将 css 值绑定到 HTML <code> 元素内的视图，并按如下方式格式化和呈现:

And I want to bind the css value to my view inside an HTML <code> element and formatted and rendered as so:

<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>

我该如何进行这项工作?谢谢！

推荐答案

如果你想在你的图标数组中迭代，你可以使用带有 v-for 指令的模板:

If you want to iterate inside your icons array, you can use a template with the v-for directive :

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

这篇关于如何将 CSS 类绑定到 HTML 代码标签中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！