Vue v-model收集表单数据

1 单行文本

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

<input v-model="content">
1

var vm = new Vue({
    ...
    data: {
        content: ""
    }
})
1
2
3
4
5
6

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

<div id="app">
    <input type="text" v-model="content">
    <br>
    {{content}}
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            content: ""
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

2 多行文本

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

<textarea v-model="text">textarea>
1

var vm = new Vue({
    ...
    data: {
        text: ""
    }
})
1
2
3
4
5
6

示例代码：

<div id="app">
    <textarea v-model="text">textarea>
    <br>
    <div style="white-space: pre-line;">{{ text }}div>
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            text: ""
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3 复选框

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

<input type="checkbox" v-model="xxx" value="value1">
1

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

var vm = new Vue({
    el: "#app",
    data: {
        xxx: [] / ""
    }
})
1
2
3
4
5
6

示例代码：

<div id="app">
    <input type="checkbox" v-model="fruit" value="apple">苹果
    <input type="checkbox" v-model="fruit" value="banana">香蕉
    <input type="checkbox" v-model="fruit" value="peer">鸭梨
    <div>爱吃的水果有：{{fruit}}div>
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            fruit: []
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4 单选按钮

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

<input type="radio" v-model="xxx" value="value1">
1

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

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

示例代码：

<div id="app">
    <input type="radio" v-model="number" value="One">One
    <input type="radio" v-model="number" value="Two">Two
    <input type="radio" v-model="number" value="Three">Three
    <div>选中的值是：{{number}}div>
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            number: "Two"
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5 选择器

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

<select v-model="xxx">
    <option value="value1">option1option>
    <option>option2option>
    ...
select>
1
2
3
4
5

var vm = new Vue({
    el: "#app",
    data: {
        xxx: ""
    }
})
1
2
3
4
5
6

示例代码：

<div id="app">
    <select v-model="hasValue">
        <option value="has">有value值，value为hasoption>
        <option>无value值option>
    select>
    选择了：{{hasValue}}
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            hasValue: ""
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

示例代码：

<div id="app">
    <select v-model="hasValue">
        <option value="has">有value值，value为hasoption>
        <option>无value值option>
    select>
    选择了：{{hasValue}}
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            hasValue: "无value值"
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6 修饰符

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

---

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

<div id="app">
    <input type="number" v-model="age">
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            age: ""
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11

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

<input type="number" v-model.number="age">
1

---

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

<div id="app">
    <textarea v-model.lazy="text">textarea>
    具体内容：{{text}}
div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            text: ""
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12