vue之placeholder中引用字体图标

先说一下问题：在placeholder中想使用字体图标，结果渲染不正确，代码如图



效果如图



在网上get到了解决方法：

在VUE组件中，给placeholder添加图标，需要注意以下几点：

1、不要给placeholder直接赋值，如下

<input type="text" class="iconfont search" placeholder=' 搜索音乐、视频、歌词、电台'>

应该使用：placeholder对此属性进行绑定赋值，如下

<input type="text" class="iconfont search" :placeholder='icon'>

export default {
name: 'app',
data:function(){
return{
icon:'\ue65a 搜索音乐、视频、歌词、电台'
}
}
}

2、iconfont的值，必须是字体的unicode编码

例如：

阿里巴巴字体库的unicode引用为  在vue组件中引用时，则为 \ue65a

在\u加阿里unicode字体编码后4位即可。

然后就ok啦