vue之placeholder中引用字體圖標

先說一下問題：在placeholder中想使用字體圖標，結果渲染不正確，代碼如圖

效果如圖

在網上get到了解決方法：

在VUE組件中，給placeholder添加圖標，需要注意以下幾點：

1、不要給placeholder直接賦值，如下

<input type="text" class="iconfont search" placeholder='&#xe65a; 搜索音樂、視頻、歌詞、電台'>

應該使用：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啦