Vue.js 中的 v-model 深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/hhcharming/article/details/123616519

本文详细介绍了Vue.js中v-model在不同输入元素上的工作原理，包括text、radio、checkbox等。v-model.trim用于去除输入首尾空格，number则将输入转换为数字。对于checkbox，当v-model初始值为非数组时，收集的是布尔值；为数组时，收集的是选中项的value数组。同时提到了v-model的lazy修饰符（失去焦点后更新）和修饰符number、trim的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结

若<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 未勾选，是布尔值）

（）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

numberl：输入字符串转为有效的数字

trim：输入收尾空格过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>姓名案例</title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <form>
				账号:<input type="text" v-model.trim="account"><br/>
				密码:<input type="text" v-model="password"><br/>
				年龄:<input type="number" v-model.number="age"><br/>
				性别:
				男<input type="radio" name="sex" v-model="sex" value="male">
				女<input type="radio" name="sex" v-model="sex" value="female"><br/>
				爱好:
				学习<input type="checkbox" v-model="hobby" value="study">
				打游戏<input type="checkbox" v-model="hobby" value="game">
				吃饭<input type="checkbox" v-model="hobby" value="eat">
				<br/>
				所选校区
				<select v-model="city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
				</select>
				<br/>
				其他信息:
				<textarea v-model.lazy="other"></textarea><br/>
				<input type="checkbox" v-model="agree">阅读并接受<a href="http://www.aatguigu.com"></a>
				<button>提交</button>
			</form>
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        new Vue({
			el:"#root",
			data:{
				account:'',
				password:'',
				age:18,
				sex:'female',
				hobby:[],
				city:'',
				other:'',
				agree:''

			}
		})
        </script>
	</body>
</html>

收集表单数据