[vue]关于VUE里面引用字体图标的疑问

今天用VUE框架写代码发现，HTML5的placeholder属性，在普通的HTML中，可以使用字体图标，在VUE中就会无效。使用了input：：-webkit-input-placeholder也没用。

哈哈，终于解决了
要在VUE组件中，给placeholder添加图标，需要注意以下几点：

1. 不要直接给placeholder 赋值 ， 如下：
<input type='text' name='userPwd' placeholder='&#xe50b; 密码'/>
而使用:placeholder对此属性进行绑定
<input type='text' name='userPwd' :placeholder='icon'/>
export default {
name:'logIn',
  components:{
        'logBtn':btn
        },
      data:function(){
        return {
          icon:'\ue50b 密码'
         }
      }
}

2. icon 属性，必须是字体的unicode编码

 如：
 阿里巴巴的字体图标库  ， 平时使用时&#xe73c; 对应的unicode编码则为 \u加后4位        
 fontawesome字体，则在网站上直接给出了，对应图标的unicode的编码，直接复制使用就可以了.


  如下图，则将icon:'\uf2b9' 即可

 

图片：icon.png

参考：

https://stackoverflow.com/questions/44054395/how-to-escape-html-placeholder-attribute-in-rendered-vue

传奇刘星：1.字体图标样式被覆盖
2.VUE和图标样式冲突回到原帖

确定了不是图标样式被覆盖，要怎么解决VUE和图标的冲突呢？

1.字体图标样式被覆盖
2.VUE和图标样式冲突

显示效果：

描述：显示效果

图片：TIM截图20171206092811.jpg

html:

<input type='text' name='userName' placeholder='&#xe60b; 用户名/邮箱/手机号'/>
<input type='text' name='userPwd' placeholder='&#xe637; 密码'/>

css:

input{

    width: 330px;
    height: 32px;
    font-size: 12px;
    text-indent: 1em;
    color: darkgray;
    outline: none;
    margin-top: 16px;
   margin-left: 10%;
    font-family: myFont;
}


app引用字体图标：


@import "./assets/css/all.css";

哈哈，可以把你的代码贴出来嘛？