input中v-model和value不能同时调用时解决方案

liuwei54 2018-04-25 原文

<input type="text" v-model="keyWord"  value="请输入地名地址"  >

当使用如上代码时，样式如下：

输入框内并没有显示“请输入地名地址”字样，其原因是：

　　v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：

　　<input type=”text” v-bind:value=”dataA” v-on:input=”dataA = $event.target.value” />

　　v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。

因此默认的value不会显示，仅会在初始化渲染时短暂显示。

当我们要实现这个效果时，需要用到 placeholder 。

placeholder 这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE）。

<input type="text" v-model="keyWord"  placeholder="请输入地名地址">

此时输入框出现字样。若想调整文字颜色，可使用下列代码：

　　input::-webkit-input-placeholder{
            color:red;
        }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:red;
        }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:red;
        }

针对不同浏览器或不同版本的浏览器会有不同的写法，会添加相应的前缀。

注意：

　　1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input

　　2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。

　　3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input