렌더링된 vue에서 html 자리 표시자 특성을 이스케이프하는 방법

렌더링된 vue에서 html 자리 표시자 특성을 이스케이프하는 방법

나는 이슈를 보여주기 위해 jsFiddle을 설정했다.

<div id="app">
  <strong>{{title}}</strong><br>
  <input type="text" :placeholder="icon" />
</div>

new Vue({
  el: '#app',
  data: {
    title: 'Vue Rendered Info',
    icon: ''
  }
});

이것은 단지 내가 하고자 하는 일의 샘플일 뿐이다.나의 실제 프로젝트에서 나는 .vue 구성요소를 가지고 있다; 나의 아이콘이 데이터에 있든 직접 있든 나는 같은 문제를 가지고 있다.그러나 스택 오버플로우를 위해 나는 jsFiddle에서 이 문제에 대한 "작동적인" 예를 만들었다.

입력의 자리 표시자 텍스트 내부에 Font-Awesome 아이콘을 배치하려고 하는 중.

이 문제를 어떻게 해결할지에 대한 어떤 통찰력이라도 대단할 것이다.

Javascript에서 유니코드 문자를 사용하려면 해당 문자를 제대로 이스케이프해야 한다.특수 문자(JavaScript)에 대한 Microsoft 페이지를 인용하려면

\uhh 탈출 시퀀스를 사용하여 유니코드 문자를 지정할 수 있으며 여기서 hhhh는 4자리 16진수 숫자다.

글꼴 확대경 아이콘의 유니코드 식별자는 F002이다.

대신 다음을 원할 것이다.

new Vue({
    el: '#app',
    data: {
        title: 'Vue Rendered Info',
        icon: '\uf002'
    }
});

참조URL: https://stackoverflow.com/questions/44054395/how-to-escape-html-placeholder-attribute-in-rendered-vue