一文轻松了解v-model及其修饰符

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

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

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

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

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

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

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

<div class="app">
	你喜欢男的还女的：<br>
	<label>
		男
		<input type="checkbox" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{sex}}
</div>

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

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

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

<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',
	}
});

<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'],
	}
});