Vue2.0 - 15. 表单数据的收集

前端►vue2 , 评论

vue2.0 基础学习目录

  1. < input type=“text” v-model=“userName”/> v-model收集的是value值,即用户输入的值
  2. < input type=“radio” name=“sex” value=‘male’ v-model=“sex” /> v-model收集的是value值, 需要给标签配置value
  3. < input type=“checkbox” value=‘game’ v-model=“hobby” />
    如果没有配置value 则收集的是checked true or false
    如果配置了value v-model的初始值是非数组，则收集的是checked true or false
    如果配置了value v-model的初始值是数组，则收集的是value组成的数组
  4. v-model 有三个修饰符,可连续使用 v-model.trim.lazy=‘password’
    lazy 延迟收集，失去焦点再收集数据
    trim 过滤收尾空格
    number 将输入的字符串转换为数值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>15.表单数据的收集</title>
        <script src="../js/vue.js"></script>
        <style></style>
    </head>
    <body>
        <!--
            表单数据收集:
            1. <input type="text" v-model="userName"/> v-model收集的是value值,即用户输入的值
            2. <input type="radio" name="sex" value='male'  v-model="sex"  /> v-model收集的是value值, 需要给标签配置value
            3. <input type="checkbox" value='game'  v-model="hobby"  /> 
                如果没有配置value 则收集的是checked true or false
                如果配置了value v-model的初始值是非数组，则收集的是checked true or false
                如果配置了value v-model的初始值是数组，则收集的是value组成的数组
            4. v-model 有三个修饰符  
                lazy 延迟收集，失去焦点再收集数据   
                trim 过滤收尾空格  
                number 将输入的字符串转换为数值
        -->
        <div id="root">
            <h3>表单数据的收集</h3>
            <div>
                <form @submit.prevent="submitForm">
                    <div>
                        <span>账号</span
                        ><input
                            type="text"
                            v-model.lazy.trim="userInfo.account"
                        />
                    </div>
                    <div>
                        <span>密码</span
                        ><input type="password" v-model="userInfo.pwd" />
                    </div>
                    <div>
                        <span>年龄</span
                        ><input type="number" v-model.number="userInfo.age" />
                    </div>
                    <div>
                        <span>性别</span>
                        <input
                            type="radio"
                            name="sex"
                            v-model="userInfo.sex"
                            value="male"
                        />
                        <span>男</span>
                        <input
                            type="radio"
                            name="sex"
                            v-model="userInfo.sex"
                            value="female"
                        /><span>女</span>
                    </div>
                    <div>
                        <span>爱好</span>
                        <input
                            type="checkbox"
                            value="study"
                            v-model="userInfo.hobby"
                        />学习
                        <input
                            type="checkbox"
                            value="game"
                            v-model="userInfo.hobby"
                        />游戏
                        <input
                            type="checkbox"
                            value="eat"
                            v-model="userInfo.hobby"
                        />吃饭
                    </div>
                    <div>
                        <span>地址</span>
                        <select
                            name="address"
                            id="address"
                            v-model="userInfo.address"
                        >
                            <option value="beijing">北京</option>
                            <option value="nanjing">南京</option>
                            <option value="shanghai">上海</option>
                        </select>
                    </div>
                    <div>
                        <span>其他信息</span>
                        <textarea
                            name="other"
                            id="other"
                            cols="30"
                            rows="10"
                            v-model="userInfo.other"
                        ></textarea>
                    </div>
                    <div>
                        <input type="checkbox" v-model="userInfo.agree" />
                        <span>
                            阅读并接受<a href="https://odinsam.com"
                                >《用户协议》</a
                            >
                        </span>
                    </div>
                    <div><button>提交</button></div>
                </form>
            </div>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root', // 直接指定vue对应的容器
            data() {
                return {
                    userInfo: {
                        account: '',
                        pwd: '',
                        age: 0,
                        sex: '',
                        hobby: [],
                        address: 'nanjing',
                        other: '',
                        agree: false
                    }
                };
            },
            methods: {
                submitForm() {
                    console.log('function submitForm');
                }
            }
        });
    </script>
</html>

vue2.0 进阶学习的目录

完整代码可以在 GitHub

odinsam

odinsamHappy Coder

年迈但是尚能恰饭的快乐Coder。