5.1.4　表单控件绑定

在前端Web应用中，经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些（如input、change等）事件对用户输入的数据进行校验、更新等操作。在Vue.js中可以使用v-model指令同步用户输入的数据到Vue实例的data属性中，同时会对text、radio、checkbox、select等原生表单组件提供一些语法支持，以使表单操作更加容易。下面将通过示例来看看如何使用v-model更新表单组件（在双向绑定中简单介绍过，这里进行详细说明）。

1．text

text：设置文本框v-model为message。代码如下：

运行的效果如图5-5所示。

提示：当用户操作文本框时，vm.message会自动更新为用户输入的值，同时文本框中的内容也会随着改变。

2．checkbox

checkbox：复选框checkbox在表单中会经常使用。下面我们来看看单个checkbox如何使用v-model。代码如下：

运行的效果如图5-6所示。

提示：当用户勾选了复选框后，vm.checked=true（否则，vm.checked=false），label中的值也会随着改变。

3．radio

radio：当单选按钮被选中时，v-model中的变量值会被赋值为对应的value值。代码如下：

运行的效果如图5-7所示。

4．select

select：因为select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。代码如下：

运行的效果如图5-8所示。

提示：当被选中的option有value属性时，vm.selected为对应option的value值，否则为对应的text值。