v-model的使用

• 表单控件在实际开发中是非常常见的，特别是对于用户信息提交，需要大量的表单
• vue中使用v-model指令来实现表单元素和数据的双向绑定

<input type = 'text' v-model='message'>
<h1>{{message}}</h1>
data(){
return {
message:""
}}

• v-model可以看成v-bind和v-on的结合

<input type = 'text' :value='message' @input='$event.target.value = message'/>
<h1>{{message}}</h1>
data(){
return {
message:""
}

• v-model:radio

<div>
<label for='male'>
<input type='radio' value = 'male' v-model='sex'>男
</label>
<label for='female'>
<input type='radio' value = 'female' v-model='sex'>女
</label>
</div>
data(){
return{
sex:""
}}

• v-model:checkbox

//复选框分两种情况单选和多选
//单个勾选时：v-model即为boolean值
            此时value并不影响v-model
//多个勾选时
//data中对应应该是一个数组
//当选某一个时，会把input中value值赋值到数组中
<div>
<label for='agree'>
<input type='checkbox' value = 'female' v-model='isAgree'>同意协议
</label>
<input type="checkbox" value="篮球“ v-model="hobbies">
<input type="checkbox" value="篮球“ v-model="hobbies">
<input type="checkbox" value="篮球“ v-model="hobbies">
<input type="checkbox" value="篮球“ v-model="hobbies">
</div>
data(){
return {
isAgree:false，
hobbies:[]
}}

• v-model：select

//select中也分单个和多个选择
//单个选择时
//v-model绑定是一个值
//当我们选中option中一个时。会将对应的option的value赋给v-model绑定的值
//多选
//v-model绑定的是一个数组
//当选择多个值时，就会添加到v-model绑定的数组中