Html 在 Vue 3 中使用 JavaScript 数组显示 FontAwesome 图标

<font-awesome-icon icon="fa-solid fa-shop" />

<div class="aboutme-card" v-for="(item,index) in servicesArr" :key="index">
  <div class="service-card-icon">{{item.icon}}</div> <!--but its display as text not as icon svg-->
  <div class="service-card-title">{{item.title}}</div>
  <p class="service-card-desc">{{item.description}}</p>
</div>

<script>
export default {
  data() {
    return {
      servicesArr: [
        {
          icon: `<font-awesome-icon icon="fa-solid fa-shop" />`,
          title: "E-commerce",
        }
      ]
    }
  }
}
</script>

<template>
  <div class="aboutme-card" v-for="item in servicesArr" :key="item.icon">
    <div class="service-card-icon">
      <font-awesome-icon :icon="item.icon" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      servicesArr: [
        {
          icon: "fa-solid fa-shop",
          title: "E-commerce",
        }
      ]
    }
  }
}
</script>

Html相关问答推荐

禁用与行分开的边框折叠span

在NzMessageService中传递动态TemplateRef- Angular 15

为什么不是所有字体好的图标都能与boostRapCDN一起使用呢？

将表格背景图像置于行背景 colored颜色 之上

如何更改计时器S输入的Angular 字体大小？

当溢出到滚动条中时， bootstrap 按钮样式会更改

如何翻转卡片图像的背面

CSS中的转换属性是如何工作的？

如何使VS代码支持以模仿嵌套的方式对已经包含注释的HTML进行注释？

如何将 元素与常规文本垂直对齐

用由文本制成的边框包围内容

将箭头图标添加到工具提示包装器时遇到问题

在 flexbox 中使用 spacer 是否有效

Angular中如何向单选按钮添加验证

如何只为 Navbar 中的一个元素提供动画，其余元素没有使用 css 的动画

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

vs

如何使我的下拉菜单响应？

具有淡入/淡出效果的 CSS 选框

如何将内容从侧边栏的底部移动到右侧？