- Vue.js从入门到项目实践(超值版)
- 聚慕课教育研发中心编著
- 520字
- 2022-07-29 14:27:46
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所示。
图5-5 text文本运行效果图
提示:当用户操作文本框时,vm.message会自动更新为用户输入的值,同时文本框中的内容也会随着改变。
2.checkbox
checkbox:复选框checkbox在表单中会经常使用。下面我们来看看单个checkbox如何使用v-model。代码如下:
运行的效果如图5-6所示。
图5-6 checkbox文本运行效果图
提示:当用户勾选了复选框后,vm.checked=true(否则,vm.checked=false),label中的值也会随着改变。
3.radio
radio:当单选按钮被选中时,v-model中的变量值会被赋值为对应的value值。代码如下:
运行的效果如图5-7所示。
图5-7 radio文本运行效果图
4.select
select:因为select控件分为单选和多选,所以v-model在select控件的单选和多选上会有不同的表现。代码如下:
运行的效果如图5-8所示。
图5-8 select文本运行效果图
提示:当被选中的option有value属性时,vm.selected为对应option的value值,否则为对应的text值。