【Vue】基础系列（七）v-model - 自动收集数据 - 表单数据自动更新

v-model 收集数据

v-model 是 Vue.js 提供的一个非常强大的双向数据绑定指令，主要用于表单控件中，实现数据的自动收集和同步更新。它在处理表单输入时极大地简化了开发过程。

使用v-model(双向数据绑定)自动收集数据

v-model 可以用于各种表单元素，如 <input>, <textarea>, <select>，并且会根据元素类型自动选用合适的绑定方式。

v-model的三个修饰符

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字
trim：输入首尾空格过滤

text

new Vue({
el: '#app',
data: {
message: ''
}
});

当用户在输入框中输入内容时，message 数据会自动更新。

示例代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
<!–
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
–>
<!– 准备好一个容器–>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
密码：<input type="password" v-model="userInfo.password"> <br /><br />
年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
<button>提交</button>
</form>
</div>
</body>

new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: 18
}
}
})
</script>

</html>

textarea

v-model 也适用于 <textarea>，效果与 <input> 类似。

radio

<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

<input type="radio" v-model="picked" value="Option 1">
<input type="radio" v-model="picked" value="Option 2">
<p>选中的选项: {{ picked }}</p>

当用户选择不同的选项时，picked 会自动更新为对应的 value 值。

示例代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
<!–
收集表单数据：
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

–>
<!– 准备好一个容器–>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
密码：<input type="password" v-model="userInfo.password"> <br /><br />
年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
<button>提交</button>
</form>
</div>
</body>

new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: 18,
sex: 'female'
}
}
})
</script>

</html>

checkbox

<input type="checkbox"/>

<input type="checkbox" v-model="isChecked">
<p>复选框状态: {{ isChecked }}</p>

isChecked 会根据复选框的勾选状态自动更新为 true 或 false。

<input type="checkbox" v-model="checkedNames" value="Jack">
<input type="checkbox" v-model="checkedNames" value="John">
<input type="checkbox" v-model="checkedNames" value="Mike">
<p>选中的名字: {{ checkedNames }}</p>

checkedNames 是一个数组，包含所有被选中的选项。

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

配置input的value属性:

v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的的就是value组成的数组！！！

示例代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
<!–
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
–>
<!– 准备好一个容器–>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
密码：<input type="password" v-model="userInfo.password"> <br /><br />
年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br /><br />
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br /><br />
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>

new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: 18,
sex: 'female',
hobby: [],
city: 'beijing',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>

</html>

v-model 的原理与自动收集数据

v-model 实现了表单控件的双向数据绑定，这意味着数据的改变会自动反映在视图上，用户的输入也会自动更新到数据中。

双向绑定的工作原理:

绑定输入事件：当用户输入内容时，v-model 会监听 input, change, blur 等事件，并将最新的值更新到 Vue 实例的 data 中。
视图更新：当 data 中的值发生变化时，Vue 的响应式系统会自动更新视图中的值，使之与数据保持同步。

表单数据的自动更新

通过 v-model，Vue 可以自动处理表单元素的数据绑定，使得表单数据与应用数据模型保持一致。

组合使用 v-model:

在复杂表单中，你可以为每个输入元素使用 v-model 来绑定数据，从而简化数据收集和表单提交的过程。

<p>提交的数据: {{ formData }}</p>
</div>

在这个例子中，formData 中的每个字段都与表单输入元素绑定，表单数据会自动收集，并在提交时打印到控制台。