The Vue input control binds dynamic attributes and modifiers through values.

The Vue input control binds dynamic attributes and modifiers through values.

For the single-choice button, check box and select the list option. The value bound to the v-model is usually a static string (logical value for the check box ):

<! -- During the election, 'picked' is the string "a" --> <input type = "radio" v-model = "picked" value = "a"> <! -- 'Toggle 'is true or false --> <input type = "checkbox" v-model = "toggle"> <! -- When elected, 'selected' is the string "abc" --> <select v-model = "selected"> <option value = "abc"> ABC </option> </select>

But sometimes we want to bind the value to a dynamic attribute of the Vue instance. In this case, we can use v-bind, and the value of this attribute can be not a string.

This is the most cognitive example.

<Input type = "radio" v-model = "pick" v-bind: value = "a"> // when only the v-model is available, we have bound the pick data in the VUE instance, which is usually a string or a logical value. Now, the value is bound through v-bind, which means that value is a variable data, instead of the string 'A', the value selected by the v-model in this control points to the value. After binding with v-bind, the value pointing to is a dynamic attribute, therefore, you can use the dynamic attribute a to change the value bound to the v-model. This is also true for other controls, such as select and other vm. pick = vm. a

. Lazy

By default, v-model synchronizes the value and data of the input box in the input event (except for the above IME part), but you can add a modifier lazy, to synchronize data in the change event:

// The test is updated only when the focus is lost, instead of the real-time update.

<input v-model.lazy="msg" >

. Number

If you want to automatically convert your input value to the Number type (if the original value is NaN, the original value is returned), you can add a modifier number to v-model to process the input value:

<Input v-model.number = "age" type = "number"> {typeof age} // If the input is a string, it is a string, and if it is a numeric string, it is converted to number

This is usually useful, because when type = "number", the input value in HTML always returns the string type.

. Trim

To automatically filter spaces at the beginning and end of user input, you can add the trim modifier to the v-model to filter input:

<input v-model.trim="msg">

The above section describes how to bind dynamic attributes and modifiers to the Vue input control through value. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!