input中v-model和value不能同時調用時解決方案

<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