正文
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啦
