1.6 表单绑定

• v-model绑定input

<div id="app">
    //通过v-model实现双向绑定
    <input type="text" v-model="message" />{{message}}		
    //v-model的实现原理	
    <input type="text" @input="message=$event.target.value" :value="message" />{{message}}
</div>

---

• v-model绑定radio

radio的HTML写法:<label for="male">男<input type="radio" name="sex" id="male"></label><label for="female">女<input type="radio" name="sex" id="female"></label>，通过指定name属性进行编组，否则都可以选中。但如果指定的v-model可以省略name属性。

<div id="app">
	<label for="male">男<input type="radio" id="male" value="男" v-model="sex"></label>
	<label for="female">女<input type="radio" id="female"  value="女" v-model="sex">/label>
	<h2>你选择的是：{{sex}}</h2>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
        //可以设置默认值，model会自动选中，实现双向编定
		data:{
			sex:''
		}
	})
</script>

---

• v-model绑定checkbox

只绑定一个checkbox,v-model对应的是一个布尔值，绑定多个checkbox时，v-model对应的是一个数组，checkbox加value值。

<div id="app">
	<label for="male"><input type="checkbox" id="agree" v-model="agree">同意协议</label>
	{{agree}}
	<button type="button" :disabled="!agree">下一步</button>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			agree:false
		}
	})
</script>

<div id="app">
	<input type="checkbox" value="河南" v-model="shengfen">河南
	<input type="checkbox" value="山东" v-model="shengfen">山东
	你选择的是:{{shengfen}}
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			shengfen:[]
		}
	})
</script>

---

• v-model绑定select

select也和checkbox一样，分单个选择和多个选择两种情况。

<div id="app">
	<!-- 选择单个 -->
	<select v-model="result">
		<option value="苹果">苹果</option>
		<option value="梨">梨</option>
		<option value="芒果">芒果</option>
	</select>
	<h2>你选择的是:{{result}}</h2>
	<!-- 选择多个 -->
	<select v-model="results" multiple>
		<option value="苹果">苹果</option>
		<option value="梨">梨</option>
		<option value="芒果">芒果</option>
	</select>
	<h2>你选择的是:{{results}}</h2>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const app=new Vue({
		el:'#app',
		data:{
			result:'梨',
			results:[]
		}
	})
</script>

• v-model修饰符

1. lazy  默认同步输入数据，使用lazy后在回车或者失去焦点后才会更新
2. number 默认在给变量赋值值时是字符型，使用number直接赋成number类型，主要用于数字类型
3. trim  对输入的前后空格进行去除