时间戳

首页 > 解决方案 > 字体很棒的图标不在 Vue 的 v-for 循环中显示，而是呈现为 HTML 文本

vue.js - 字体很棒的图标不在 Vue 的 v-for 循环中显示，而是呈现为 HTML 文本

问题描述

我必须用 v-for 循环一个元素四次，一切都渲染得很好，但是 fontawesome 图标没有显示为图标，而是显示为 HTML 文本。这是代码：

HTML：

<div class="second-section-paragraph-1" v-for="(el) in ideasDrawings">
    <div>
        {{el.icon}}
    </div>
    <h3>{{el.title}}</h3>
    <p>{{el.paragraph}}</p>
</div>

视图：

ideasDrawings: [
    {
        icon: '<i class="fas fa-lightbulb"></i>',
        title:'First there is an idea',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: '<i class="far fa-comment"></i>',
        title:'Then we talk about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: '<i class="fas fa-cloud"></i>',
        title:'And we think about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },
    
    {
        icon: '<i class="fas fa-pencil-alt"></i>',
        title:'So we draw along',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

标签： vue.jsfont-awesome

解决方案


<div
 class="second-section-paragraph-1"
 v-for="(el) in ideasDrawings"
 :key="el.title"
>
    <i :class="el.icon"></i>
    <h3>{{el.title}}</h3>
    <p>{{el.paragraph}}</p>
</div>


ideasDrawings: [
    {
        icon: 'fas fa-lightbulb',
        title:'First there is an idea',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'far fa-comment',
        title:'Then we talk about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'fas fa-cloud',
        title:'And we think about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },
   ]

图标：' far fa-comment'，图标：' fas fa-cloud'

推荐阅读