vue.js - Vue.js/Weex：Fontawesome 不能处理动态文本

Question

<template>
  <div>
    <text class="fontawesome">&#xf053;</text>
    <text class="fontawesome">{{testfontawesome}}</text>
  </div>
</template>
<style scoped>
  .fontawesome {
    font-family:FontAwesome;
  }
</style>
<script>
    export default {
        data: () => ({
            testfontawesome: "&#xf053;"
        }),
    }
</script>

如何在动态值中显示 fontawesome 图标？在上面的代码示例中，只有第一行正确显示了图标，其次显示了原始值而不是图标。为什么？

Answer 1

您需要将值绑定为原始 html。

https://vuejs.org/v2/guide/syntax.html#Raw-HTML

<text class="fontawesome" v-html="testfontawesome"></text>

Vue 通过自动 html 编码值保护您免受跨站点脚本 (XSS) 攻击。

正如文档中的警告指出的那样，避免使用v-html显示用户生成的文本，因为它可能是恶意的。