Vue.js/Weex : 동적 텍스트에서 폰트 룸이 작동하지 않습니다.

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> 

어떻게 글꼴 값 아이콘을 동적 값으로 표시 할 수 있습니까? 위의 코드 샘플에서는 첫 번째 줄만 아이콘을 올바르게 표시하고 둘째 아이콘 대신 원시 값을 표시합니다. 왜?

Answer 1

당신은 원시 HTML로 값을 결합해야합니다.

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

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

뷰

자동으로 HTML 인코딩 값으로 크로스 사이트 스크립팅 (XSS) 공격으로부터 사용자를 보호한다.

문서의 경고 내용에 따르면 악의적 일 수 있으므로 사용자 생성 텍스트를 표시하려면 v-html을 사용하지 마십시오.