Vue v-model收集表单数据

• 1 单行文本
• 2 多行文本
• 3 复选框
• 4 单选按钮
• 5 选择器
• 6 修饰符

1 单行文本

对于输入框input，直接使用v-model绑定属性即可，该属性需要在data中定义。用法如下：

var vm = new Vue({...data: {content: ""}
})

示例：在输入框中输入内容，该内容显示在输入框下

{{content}}

2 多行文本

多行文本textarea直接使用v-model绑定属性即可，该属性在data中定义。具体如下：

var vm = new Vue({...data: {text: ""}
})

示例代码：

{{ text }}

3 复选框

复选框除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：

无论出现几个复选框，这一组复选框的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果是选项组，则在data中要初始化xxx为空数组，如果是单个复选框，初始化为空字符串即可，具体如下：

var vm = new Vue({el: "#app",data: {xxx: [] / ""}
})

示例代码：

苹果香蕉鸭梨
爱吃的水果有：{{fruit}}

4 单选按钮

单选按钮除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：

单选按钮一般是搭配使用的，那么这一组的单选按钮的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果默认选中某个按钮，则xxx需要在data中初始化为该按钮的value值，具体如下：

var vm = new Vue({el: "#app",data: {xxx: "value1" // 表示默认选中value值为value1的选项}
})

示例代码：

OneTwoThree
选中的值是：{{number}}

5 选择器

选择器要在select上面使用v-model绑定属性，并且这个属性要在data中进行定义，而option可以选择是否传入value属性，如果传入了value属性，那么属性的值为value值，如果没有传入，属性的值为选项的内容。具体如下：

option1option2...

var vm = new Vue({el: "#app",data: {xxx: ""}
})

示例代码：

有value值，value为has无value值选择了：{{hasValue}}

在上面的效果中，我们可以看到，最初的时候选择器是空白的，如果要设置一个默认选项，那么在data中定义的属性值要初始化，有value属性要初始化为value属性，无则初始化为option的内容。

var vm = new Vue({el: "#app",data: {xxx: "value值/option的内容"}
})

示例代码：

有value值，value为has无value值选择了：{{hasValue}}

6 修饰符

v-model提供了一些修饰符：

例如，当收集用户年龄时，类型应该是number，但是input收集的内容是string类型：

这是需要用到.number修饰符，将类型改为number类型：

例如，当输入框会输入很多内容时，v-model会对内容实时进行监视，使用.lazy修饰符可以在内容全部输入完成之后，文本框失去焦点时再获取：

具体内容：{{text}}