The method of Vue input control binding dynamic attributes and modifiers through value

For radio buttons, checkboxes and select list options, the value bound by v-model is usually a static string (a logical value for checkboxes):

<!-- When selected，`picked` as a string "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` for true or false -->
<input type="checkbox" v-model="toggle">
<!-- When selected，`selected` as a string "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

But sometimes we want to bind value to a dynamic property of the Vue instance, which can be implemented using v-bind, and the value of this property may not be a string.

Give the easiest example to recognize

<input type="radio" v-model="pick" v-bind:value="a">
//When there is only v-model, we bind the pick data in the VUE instance, and this data is often string or logical value. Now binding value through v-bind means that value is a variable data a, not string 'a', and the value selected by v-model points to value. After binding with v-bind, the value pointed to is a dynamic property, so you can change the value bound by v-model, and the same is true for other controls, such as select, etc.// When selected === 

.lazy

By default, v-model synchronizes the input box's value with data in the input event (except the IME section above), but you can add a modifier lazy to synchronize in the change event:

//The test is updated only when the focus is lost, not in real time

<input ="msg" >

.number

If you want to automatically convert the user's input value to Number type (return to the original value if the conversion result of the original value is NaN), you can add a modifier number to v-model to process the input value:

<input ="age" type="number">
{{typeof age}}//If you enter a string, it isstring,If it is a numeric string, it will be converted tonumber

This is usually useful because the value entered in HTML will also always return the string type when type="number".

.trim

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

<input ="msg">

The above is the method of Vue input control binding dynamic attributes and modifiers through value introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!