Learn v-model and its modifiers in one article

Preface

Used to bind data and element value to achieve two-way binding.

When the value of the element changes, the data also changes, and conversely, when the data changes, the value of the element also changes.

In most cases, all user input values ​​must go through v-model, which is easy to use, safe, and powerful.

<div class="app">
	<input type="text" v-model="name">
	{{name}}
</div>

var app = new Vue({
	el:'.app',
	data:{
		name:'Alice'
	}
});

Modifiers of v-model:

lazy

Lazy means lazy update, which will not be updated immediately.

In fact, it triggers a change event.

Advantages: The form validation result will be displayed only when the user has finished inputting, whether it is correct or wrong. But don't disturb the user while he is typing. In addition, the performance has also been slightly improved (but it is very small and can be ignored)

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

trim

trim; cut off, here means: remove all spaces at both ends

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

number

Generally used for types that can be expressed in numbers, such as age and price

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

In normal cases, if number is not provided, the user input is a number, but it is also a string of numbers. If the modifier v-model.number is filled in here, then the number obtained is of type number and no further conversion is required.

In addition to being used in input boxes whose type is text, v-model can also be used in other places.

Use of v-model on different input types and other elements

1. In addition to the input element, it can also be used on other types of input elements

1.1 Use on input element type radio (single selection box)

<div class="app">
	<label>
		Male <input type="radio" v-model="sex" value="male">
	</label>
	<label>
		Female <input type="radio" v-model="sex" value="famale">
	</label>
	{{sex}}
</div>

//main.js
var app = new Vue({
	el:'.app',
	data:{
		sex:'',
	}
});

1.2 Use on input element type checkbox (checkbox)

<div class="app">
	Do you like men or women:<br>
	<label>
		Male <input type="checkbox" v-model="sex" value="male">
	</label>
	<label>
		Female <input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{sex}}
</div>

var app = new Vue({
	el:'.app',
	data:{
		sex:['male'],
	}
});

2. Use of v-model in textarea (multi-line text)

Multi-line text

In fact, there is no difference in the usage of multi-line text and single-line text, except that one is multi-line and the other is single-line, and the usage is the same.

<div class="app">
	<textarea v-model="article"></textarea>
</div>

var app = new Vue({
	el:'.app',
	data:{
		article:`has a lot of code. . . . . . . . . . . . . . . . . . . . `,
	}
});

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

3.1 Single-select 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>

var app = new Vue({
	el:'.app',
	data:{
		from:'1',
	}
});

3.2 Multi-select drop-down list

In fact, it is to add a multiple attribute to the element, indicating multiple, multiple selection

<div class="app">
	<div>where are 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>

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

Summarize

This is the end of this article about v-model and its modifiers. For more information about v-model and its modifiers, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!