Easy to understand v-model and its modifiers in one article

Preface

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

When the value of an element changes, the data also changes. Conversely, when the data changes, the value of the element also changes.

In most cases, all user input values ​​must be passed through v-model, which is easy to use, and safe, and has a very powerful function.

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

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

Modifier for v-model:

lazy

Laziness means lazy updates and will not be updated immediately.

In fact, it triggered a change event.

Advantages: Only when the user enters it will bind it, and the result of the form verification will be displayed, whether it is correct or wrong. But during the user input process, do not disturb him. In addition, the performance has also improved a little bit (but it is very small and can be ignored)

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

trim

Trim; cut off, cut off, here means: remove all spaces at the front and back ends

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

number

Generally used for types such as age, price, etc. that can be represented by numbers

<div class="app">
    <input type="text" ="age">
    {{age}}
</div>

Normally, if there is no number, the user enters a number, but also a number of a string. If you fill in the modifier here, you will get a number of type number and you don't need to convert it anymore.

In addition to being able to use the input type as text input box, v-model can also be used elsewhere.

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

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

1.1 Use on input element type radio (radio 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>

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

1.2 Use on the input element type checkbox (checkbox)

<div class="app">
	You like men and 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 (multiple lines of text)

Multiple lines of text

In fact, there is no difference between using multiple lines of text and single-line text, but one single line is used 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-choice 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 Multiple Selection Drop-down List

In fact, it is to add a multiple attribute to the element, which means multiple selections.

<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 related contents of v-model and its modifiers, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!