表单收集

Vue2表单收集：

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

一、基础用法

（1）输入框<input type="text">、密码框<input type="password">：

1
2
<p>账号：<input type="text" v-model="accent"></p>
<p>密码：<input type="password" v-model="password"></p>
1
2
3
4
5
6
7
8
9
new Vue({
    el: '#app',
    data() {
        return {
            accent: '',
            password: ''
        }
    },
})

（3）单选框<input type="radio">：

1
2
男：<input type="radio" name="sex" value="male" v-model="sex"> 
女：<input type="radio" name="sex" value="female" v-model="sex">
1
2
3
4
5
6
7
8
new Vue({
    el: '#app',
    data() {
        return {
            sex: 'female',//默认女
        }
    },
})

（3）复选框<input type="checkbox">：

单个复选框时正常使用v-model；多个复选框时，要获取value值，使用如下方法：

1
2
3
<input type="checkbox" value="study" v-model="hobby">学习
<input type="checkbox" value="game" v-model="hobby"> 打游戏
<input type="checkbox" value="eat" v-model="hobby">吃饭
1
2
3
4
5
6
7
8
new Vue({
    el: '#app',
    data() {
        return {
            hobby:[]
        }
    },
})

当点击学习和打游戏时，vue中显示hobby:[study,game]。

（4）选择框<select>：

1
2
3
4
5
6
<select v-model="city">
    <option value="">请选择校区</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>
1
2
3
4
5
6
7
8
new Vue({
    el: '#app',
    data() {
        return {
            city:'beijing',//默认北京
        }
    },
})

（5）文本域<textarea>：

1
其他信息：<textarea v-model="other"></textarea>
1
2
3
4
5
6
7
8
new Vue({
    el: '#app',
    data() {
        return {
            other:''
        }
    },
})
收集的信息转换为数字v-model.number
1
年龄：<input type="number" v-model.number="userInfo.age">
1
2
3
4
5
6
7
8
9
10
new Vue({
    el: '#app',
    data() {
        return {
            userInfo:{
                age:''
            }
        }
    },
})

因为年龄是数字，所以输入框设置type:”number”，此时userInfo.age为字符串，若使其为数字，设置v-model.number。

懒加载v-model.lazy：

在输入文字时不希望vue实时双向绑定，使用懒加载。作用：用户输入完不会实时显示在vue中，只有该控件失去焦点时，数据才会显示在vue中。

1
其他信息：<textarea v-model.lazy="userInfo.other"></textarea>
1
2
3
4
5
6
7
8
9
10
new Vue({
    el: '#app',
    data() {
        return {
            userInfo:{
                other:''
            }
        }
    },
})

只有用户输入完信息后，文本域控件失去焦点时才会显示在vue中。

去掉前后空格v-model.trim：
1
账号：<input type="text" v-model.trim="userInfo.accent">
1
2
3
4
5
6
7
8
9
10
new Vue({
    el: '#app',
    data() {
        return {
            userInfo:{
                accent:''
            }
        }
    },
})

当用户输入( ab c )时（括号内），vue会去掉前后空格，保留中间空格，vue显示为accent:’ab c’。

总结

收集表单数据：
1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
3. 若：<input type="checkbox"/>
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
1. v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. v-model的初始值是数组，那么收集的的就是value组成的数组
3. 备注：v-model的三个修饰符：
1. lazy：失去焦点再收集数据
2. number：输入字符串转为有效的数字
3. trim：输入首尾空格过滤

编程
#JavaScript
表单收集
http://vityabour.github.io/2023/09/04/表单收集/
作者
Vity Abour
发布于
2023年9月4日
许可协议