“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Used to bind data and element value to achieve bidirectional binding.

When the value of the element changes, the data changes, and conversely, when the data changes, the value of the element changes. For the most part, all user input goes through the V-Model, which is both user-friendly and secure, and very powerful.

<div class="app">
	<input type="text" v-model="name">
	{{name}}
</div>
Copy the code
var app = new Vue({
	el:'.app'.data: {name:'Alice'}});Copy the code

Modifiers for v-model:

lazy

Lazy, meaning lazy update, not update immediately.

It actually triggers a change event. Benefit: Bind only when the user has finished typing, and the result of the form’s validation, correct or incorrect, is displayed. But leave the user alone while he is typing. There was also a slight (but negligible) performance improvement

<div class="app">
    <input type="text" v-model.lazy="name">
    {{name}}
</div>
Copy the code

trim

Clip; Remove all Spaces at both ends

<div class="app">
    <input type="text" v-model.trim="name">
    {{name}}
</div>
Copy the code

number

Generally used for age, price, etc., which can be expressed numerically

<div class="app">
    <input type="text" v-model.number="age">
    {{age}}
</div>
Copy the code

In the usual case, if there is no number, the user enters a number, but it is also a string number. If you fill in the modifier v-model.number then you get a number of type number, no need to convert.

The V-model can be used in other places besides the input type text field.

Use of V-models for different input types and other elements

1. In addition toCan also be used on input elements of other types

1.1 Use on Input element type Radio (checkbox)

男
女
<div class="app">
	<label>
		男
		<input type="radio" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="radio" v-model="sex" value="famale">
	</label>
	{{sex}}
</div>
Copy the code
//main.js
var app = new Vue({
	el:'.app',
	data:{
		sex:'',
	}
});
Copy the code

1.2 Use (checkbox) on input element type checkbox

<div class="app"> Male <input type="checkbox" V-model ="sex" value="male"> </label> <label> female <input type="checkbox" v-model="sex" value="famale"> </label><br> {{sex}} </div>Copy the code
var app = new Vue({
	el:'.app',
	data:{
		sex:['male'],
	}
});
Copy the code

2. Use of V-model in Textarea (multi-line text)

Multi-line text is actually multi-line text, and the use of single-line text is no different, but a multi-line a single line, use is the same.

<div class="app">
	<textarea v-model="article"></textarea>
</div>
Copy the code
var app = new Vue({
	el:'.app'.data: {article:'has a lot of code... `,}});Copy the code

3. Use v-model in select (drop down list)

3.1 Option drop – down List

<div class="app">
	<div>Where are you from?</div>
	<select v-model='from'>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
	</select>
</div>
Copy the code
var app = new Vue({
	el:'.app'.data: {from:'1',}});Copy the code

3.2 Multiple Selection drop-down list

A multiple attribute is applied to the element

<div class="app">
	<div>Where do you want to go?</div>
	<select v-model='from' multiple>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
		<option value="4">SHANGHAI</option>
		<option value="5">CHENGDU</option>
	</select>
</div>

Copy the code
var app = new Vue({
	el:'.app'.data: {from: ['1'.'2']}});Copy the code