# 表单与v-model
>[success] 可在此处查看运行文档中的代码示例结果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## 基本用法
>[info] 在使用表单元素时，使用`v-model`指令来对数据进行双向绑定，vue会根据控件的类型对数据自动进行处理
**<span style="padding-top:15px;display:inline-block;">input和textarea文本域</span>**
input表单通过`v-model`指令绑定数据，在input中输入数据后实时更新绑定的数据。textarea同理
~~~html
<input type="text" v-model="message" value="5">
<div>输入的数据为:{{message}}</div>
<textarea name="text" id="text" cols="30" rows="10" v-model="textareaMeaage"></textarea>
<div>文本域输入的数据为：{{textareaMeaage}}</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
运行结果：在输入框/文本域内输入的值会实时显示在下方。
</div>
**<span style="padding-top:30px;display:inline-block;">单选框</span>**
~~~
<h5>单选框</h5>
<div>
<labe1>性别：</labe1>
<input type="radio" value="男" v-model="sex">
<input type="radio" value="女" v-model="sex">
<input type="radio" value="未知" v-model="sex">
<p>当前选中的性别为：{{sex}}</p>
</div>
~~~
```
data:{
sex:""
}
```
<div style="background:#333;color:#fff;padding:15px;">
运行结果：点击单选框选中后，`v-model`指令绑定的值变为选中的单选框的value值
</div>
**<span style="padding-top:30px;display:inline-block;">复选框</span>**
~~~
<h5>复选框</h5>
<div>
<label>爱好：</label>
<input type="checkbox" value="游泳" v-model="hobby">游泳
<input type="checkbox" value="健身" v-model="hobby">健身
<input type="checkbox" value="读书" v-model="hobby">读书
<input type="checkbox" value="打游戏" v-model="hobby">打游戏
<p>当前选中的爱好为：{{hobby}}</p>
</div>
~~~
```
data:{
hobby:[]; // 注意：数据定义为数组
}
```
<div style="background:#333;color:#fff;padding:15px;">
运行结果：选后复选框后，在绑定的数组中添加对应的value值。注意：复选框的v-model指令绑定的数据是一个数组
</div>
**<span style="padding-top:30px;display:inline-block;">v-model配合c-for指令的使用</span>**
~~~
<h5>多选列表配合v-for指令</h5>
<div>
<lable>职位：</lable>
<select name="" id="" v-model="jobs">
<option v-for="item in items" :value="item.value">{{item.text}}</option>
</select>
<p>当前选中的职位为：{{ jobs }}</p>
</div>
~~~
>[danger] 注意：如果使用`v-model`指令，则控件中的默认属性都会失效，例如value、checked、selected等，控件的值和状态只和`v-model`指令绑定的数据有关。
## 绑定值
>[info] 控件的值绑定作用是动态的为控件添加value值，此时需要配合v-bind指令使用。
>
**<span style="padding-top:15px;display:inline-block;">单选框</span>**
~~~
<h5>单选框</h5>
<div>
<label for="">开启：</label>
<input type="radio" v-model="on" :value="onValue">
<p>当前是否开启：{{ onValue }}：{{ on }}</p>
</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
运行结果：选中单选框后，vm.on === vm.onValue 为true；
</div>
**<span style="padding-top:30px;display:inline-block;">复选框</span>**
~~~
<h5>复选框</h5>
<div>
<label for="">复选框：</label>
<input type="checkbox" v-model="toggle" true-value="value1" false-value="value2">
<p>{{ toggle }}：{{ value1 }}:{{value2}}</p>
</div>
~~~
```
data:{
toggle:false,
value1:"value1",
value2:"value2",
}
```
<div style="background:#333;color:#fff;padding:30px;">
运行结果：复选框的选中状态时 vm.togger === vm.value1为true.未选中状态时：vm.togger === vm.value2为true;
</div>
>[danger] 这里的`true-value`和`false-value`特性并不会影响输入控件的`value`特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。
**<span style="padding-top:30px;display:inline-block;">选择列表</span>**
~~~
<h5>选择列表</h5>
<div>
<label for="">选择列表</label>
<select name="" id="" v-model="selected">
<option :value="selectedValue">{{selectedValue}}</option>
</select>
<p>{{ selected }}：{{ selectedValue }}</p>
</div>
~~~
<div style="background:#333;color:#fff;padding:15px;">
运行结果：选中该选项后 vm.selected === selectedValue为true。
</div>
## 修饰符
常用的修饰符有：
* `.lazy`
* `.number`
* `.trim`
**<span style="padding-top:15px;display:inline-block;">.lazy</span>**
>[info] 控件绑定的数据默认触发修改的方式为`change`，即文本域的值发生改变后所绑定的数据立即改变。`lazy`修饰符的作用就是修改触发方式为`input`，即控件失去焦点后才触发。
~~~
<h1>修饰符</h1>
<input type="text" v-model.lazy="message">
<p>输入的数据为：{{message}}</p>
~~~
<div style="background:#333;color:#fff;padding:15px;">
运行结果：当不添加.lazy修饰符时，当文本域的值发生改变后p标签内的值就会立即发生改变。添加.lazy修饰符后，只有文本域失去焦点后才会修改p标签内的值。
</div>
**<span style="padding-top:30px;display:inline-block;">.number</span>**
>[info] 获取到文本域的值时默认为string类型，即使文本域的类型为number类型。所以`number`修饰符的作用是将获取到值强制转换为数值类型
~~~
<input type="number" v-model.number="message1">
<p>输入的数据为：{{message1+1}}</p>
~~~
<div style="background:#333;color:#fff;padding:15px;">
运行结果：当不添加.number修饰符时，获取到的值作为字符串进行拼接，即输入1时，p标签内显示的为11。添加修饰符后显示为2
</div>
**<span style="padding-top:30px;display:inline-block;">.trim</span>**
>[info] `trim`修饰符的作用就是自动取消文本域中前面和后面的空白。
