Easy to learn about v model and its modifiers

Modifiers for catalog preface v-model: lazy
trim
number
Use of v-model on different input types and on other elements 1. Can be used on other types of input elements than in 2. Use of v-model in textarea (multi-line text) 3. Use of v-model in select (drop-down list) Summary

Preface

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

When the value of an element changes, so does the data, and conversely, when the data changes, so does the value of the element.

In most cases, all user input values will be used through v-model, 1 to be easy to use, 2 to be safe and powerful.

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

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

Modifiers for v-model:

lazy

Lazy means lazy updates and will not be updated immediately.

In fact, it triggers an change event.

Benefit: When the user finishes typing the binding, the result of the form validation will be displayed, whether correct or wrong. But in the process of user input, don't disturb him. In addition, there is also a 1-point improvement in performance (but it is very small and negligible)

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

trim

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

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

number

1 is generally used for age, price, etc., which can be expressed in numbers

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

Normally, without number, the user enters a number, but it is also a string number. If you fill in the modifier v-model. number, you will get a number of number type, so you don't need to convert it.

v-model can be used in other places besides the type for text input box of input.

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

1. Can be used on input elements of other types except in

1.1 Used 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>

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

1.2 Used on input element type checkbox (check box)

<div class="app">
	 Do you prefer men to 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. v-model in textarea (multi-line text)

Multiple lines of text

In fact, there is no difference between the use of multi-line text and single-line text, but one multi-line and one single-line, and the use is one.

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

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

0

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

3.1 Radio drop-down list

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

1

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

2

3.2 Multi-choice drop-down list

In fact, the element is added with an multiple attribute, which means multiple and multiple choices

<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:{
		name:'Alice'
	}
});

4

Summarize