encoding - 如何在呈现的 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: ''
  }
});

这只是我正在尝试做的一个示例(检查 jsFiddle 以获取工作示例)。在我的真实项目中，我有一个 .vue 组件；无论我的图标是在数据中还是直接在数据中，我都有同样的问题。但是为了stackoverflow，我在jsFiddle中做了一个“工作”的例子。

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

关于如何解决这个问题的任何见解都会很棒。

Answer 1

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

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'
    }
});