Solution when v-model and value in input cannot be called at the same time

<input type="text" v-model="keyWord" value="Please enter the address" >

When using the above code, the style is as follows:

The words "Please enter the place name and address" are not displayed in the input box, the reason is:

　　The official statement given by v-model is: This is actually a shorthand form. What v-model actually implements is the following binding:

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

　　v-model is a process of dynamically binding the value to the value, and then listening to the inpit event of the input to get the value and assign it to dataA.

So the default value will not be displayed, only briefly displayed when initializing the rendering.

When we want to achieve this effect, we need to use placeholder .

The placeholder attribute is a new attribute in HTML5. The function of this attribute is to specify a short prompt that can describe the expected value of the input field. The prompt will be displayed in the input field before the user enters it, and will disappear after the user enters the field. In some browsers, the prompt disappears when the focus is obtained (such as Safari, IE).

<input type="text" v-model="keyWord" placeholder="Please enter the place name and address">

The text appears in the input box. To adjust the text color, use the following code:

　　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;
        }

For different browsers or different versions of browsers, there will be different writing methods, and corresponding prefixes will be added.

Notice:

　　1. WebKit, Blink, Edge browsers, etc. need to be prefixed with -webkit-, and it is a double colon, and input should be included when writing

　　2. For the Firefox browser, there are two ways of writing, one is for the lower version and the other is for the higher version, both of which need to be prefixed with -moz-. Point 1: The lower version of Firefox uses a colon (:), while the higher version uses a double colon (::); Point 2: The Firefox browser does not need to take input like the webkit kernel.

　　3. Since the placeholder attribute is only supported in IE10+, the writing method for IE10 and IE11 is to add the -ms- prefix, use a colon (:), and need to bring input