如何在呈现的 vue 中转义 html 占位符属性

Question

我设置了一个 jsFiddle 来展示这个问题。

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

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

这只是我正在尝试做的事情的示例 （检查 jsFiddle 中的工作示例）。在我的真实项目中，我有一个 .vue 组件；无论我的图标在数据中还是直接在数据中，我都有同样的问题。但是为了 Whosebug，我在 jsFiddle 中做了一个 "working" 这个问题的例子。

我正在尝试将 Font-Awesome 图标放置在输入的占位符文本中。

任何有关如何解决此问题的见解都会很棒。

Answer 1

要在 Javascript 中使用 Unicode 字符，您必须正确转义它们。引用 Microsoft 在 Special Characters (JavaScript)

上的页面

You can specify a Unicode character by using the \uhhhh escape sequence, where hhhh is a four-digit hexadecimal number.

font-awesome magnify-glass icon 的 unicode 标识符是 F002。

因此您需要以下内容：

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

How to escape html placeholder attribute in rendered vue