Appearance
第9章 表单输入绑定
9.1 单行文本输入框
表单控件的数据绑定通过v-model指令来实现,会根据控件类型自动选取正确的方法更新元素。
v-model指令会忽略所有表单元素的value checked selected属性的初始值,而总是从活动实例中获取数据,因此初始值我们应该用ja vascript指定,或放在组件的data选项中。
v-model.trim可以自动去除数据前后的空白字符,如果空格、制表符等。
v-model.lazy能把输入框的input事件变为change事件,减少不必要的触发组件渲染。
v-model.number可以自动把用户的输入转为数值类型。
9.2 多行文本输入框
多行文本输入框,使用胡子语法当然无法进行双向数据绑定,还是要用v-model。
9.3 复选框
单个复选框,绑定的是boolean。
多个复选框,绑定的是字符串数组。
9.4 单选按钮
单选按钮,绑定的是字符串。
9.5 选择框
单选选择框,绑定的是字符串。
多选选择框,绑定的是字符串数组。
9.6 值绑定
v-model针对不同的表单控件,有默认的约定,比如单选复选框绑定的是boolean,多选复选框绑定的是个字符串数组,选中的复选框value属性的值被保存到数组中。
单选复选框
可以通过true-value false-value,将默认的boolean绑定改为字符串绑定。
单选按钮
可以通过:value把value绑定为data数据中的值。
选择框的选项
可以通过:value把value绑定为data数据中的值。
9.7 实例:用户注册
JSON是javascript对象子面量语法的子集。单页应用程序中,一般通过ajax发送数据到服务端,数据格式采用JSON,转为JSON字符串发送。在form表单中,type为submit的input,可以使用@click.prevent="方法名"来调用方法,发送ajax请求。其中,.prevent修改符可以阻止表单的默认提交行为,改为调用方法。
9.8 小结
表单控件的输入绑定通过v-model指令实现,不同组件v-model有默认的数据类型约定,但也可以通过值绑定来改变。