时间戳

首页 > 解决方案 > 如何使用 Vue 表达式呈现 html 元素？

javascript - 如何使用 Vue 表达式呈现 html 元素？

问题描述

我有一个要添加到 div 元素中的图标，例如<div> <i class='fas fa-backspace'></i> </div>. 我对Vue很陌生，任何人都可以帮助如何使用Vue做到这一点。

注意：我只想使用 Vue 表达式来做到这一点。

const app = new Vue({
    el: "#app",
    data: {
        icon: "<i class='fas fa-backspace'></i>"
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>


<div id="app">{{icon}}</div>

标签： javascriptvue.js

解决方案

我找到了答案： 使用 v-html

const app = new Vue({
    el: "#app",
    data: {
        icon: "<i class='fas fa-backspace'></i>"
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>


<div id="app" v-html="icon"></div>

推荐阅读