use

<input v-model="message">
Copy the code

The value of a form element is bound to a variable value, but since the value of a form element can be changed by the user, does the variable binding only serve an initialization function? Using only V-bind :value=’message’ will obviously only initialize the data, but using the V-model directive allows two-way binding of the data, meaning that changes to the value directly cause changes to the data inside the data.

V – the principle of the model

V-model is a syntax candy. His essence is to perform these two steps:

  • Binding data to elements is as simple as passingv-bind:value='message'You can do that.
  • When the user changes the value of a form element, we need to reassign the value to the data in the data, which is actually easy to implement. We’re listening for form elements to change. How do I listen for form elements to change? By listening for input events. When you type, the input event is also emitted. That simply assigns value to the corresponding variable in data when the event is triggered. ** How do we get value? When the user interacts with the interface, an event object is generated. The event. Target is used to retrieve the DOM element at the mouse focus.$event.target.value

This is the principle of v-Model.

A combination of V-model and radio types

Review the radio

Radio type, which is a checkbox type

<input type =" radio" value="man"> male <input type =" radio" value="woman"> femaleCopy the code

How do you tell if it’s the same checkbox?

Through the name attribute

<input type =" radio" name="sex"value="man"> male <input type =" radio" name="sex"value=" woman"> femaleCopy the code

Raido is used in combination with v-Model

Obviously v-Model should be bound to the entire radio menu box, so every option should be bound to v-Model. In other words, checkboxes bound to the same variable using the V-Model must be a set of checkboxes, so there is no need for the name attribute to distinguish.

<input type =" radio" V-model ="sex"value="man"> male <input type =" radio" v-model="sex"value=" woman"> femaleCopy the code

Setting defaults

The value of sex is the same as the value of a single check box.

Two-way binding of data

When you select a checkbox option, the value of the RAIDO checkbox is determined, so it returns the value of the checkbox option to the V-Model.

Radio is used in combination with checkbox

Checkbox is a checkbox

Usually in terms of whether or not you agree to an agreement.

<input type="checkbox" V-model ="agree"> Whether you agree to the previous protocolCopy the code

It’s just a bool, true, false, not true.So v-model, when it’s radio, it’s bound to a bool!

Checkbox checkbox

<input type="checkbox" V-model ="color" value="red"> red <input type="checkbox" V-model ="color" value="green"> Green <input Type ="checkbox" V-model ="color" value="pink"> pink <input type="checkbox" V-model ="color" value="yellow"> yellowCopy the code

It is obvious that v-Model should be bound to the entire checkbox, so every checkbox option should be bound to v-Model.At this point, the value of the V-model is obviously an array, which is an array of all the checkbox values that you selected..

Setting the initial value

For example, if I want green to be selected by default, I can make color=[“green”].

V-model is used in combination with SELECT

Review the select

<select name="color" ID =""> <option value="red"> red </option> <option value="pink"> pink </option> <option Value ="green"> </option> </select>Copy the code

If you bind the V-Model, you must bind the entire select, so you just need to add the V-Model attribute to the select.

Select

For select, v-model is a value that matches the value of the option option. Then the option is selected.

Select multiple options

In the case of multiple selections, you need to add a multiple attribute to the select to enable multiple selections. In this case, the V-model corresponds to an array consisting of the values of the selected options.

Modifier for v-model

  • Lazy. The V-Model, by default, updates data when the contents of the input field change, which is actually too frequent. So what do we need to do better? With the lazy modifier, it updates data only when it loses focus or enters a carriage return
<input type="text" v-model.lazy="message">
Copy the code
  • Number. By default, whatever is entered in the input box is treated as a string and then assigned to the v-Model bound data, if we want it to return Number instead of string. You can use the number modifier, so when you return it, it automatically converts to number and assigns it to the data.
<input type="text" v-model.number="message">
Copy the code
  • The trim. If you type something with whitespace before and after, and then assign to our data, often our data has to be processed once to remove the whitespace before and after, if we use the trim modifier, it will remove the whitespace before and after and assign to the variable.
<input type="text" v-model.trim="message">
Copy the code