如何在渲染的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组件; 无论我的图标在数据中还是直接在我有相同的问题.但是为了堆栈溢出,我在jsFiddle中做了一个"工作"问题的例子.

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

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

Answer 1

要在Javascript中使用Unicode字符,您必须正确地转义它们.引用微软关于特殊字符(JavaScript)的页面

您可以使用\ uhhhh转义序列指定Unicode字符,其中hhhh是一个四位十六进制数字.

因此,您需要以下内容:

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