先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图vue
效果如图app
在网上get到了解决方法:字体
在VUE组件中,给placeholder添加图标,须要注意如下几点:编码
一、不要给placeholder直接赋值,以下spa
<input type="text" class="iconfont search" placeholder=' 搜索音乐、视频、歌词、电台'>
应该使用:placeholder对此属性进行绑定赋值,以下3d
<input type="text" class="iconfont search" :placeholder='icon'>
export default { name: 'app', data:function(){ return{ icon:'\ue65a 搜索音乐、视频、歌词、电台' } } }
二、iconfont的值,必须是字体的unicode编码code
例如:视频
阿里巴巴字体库的unicode引用为  在vue组件中引用时,则为 \ue65a
blog
在\u加阿里unicode字体编码后4位便可。unicode
而后就ok啦