Vue收集表单数据

 收集表单数据：
            若<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：输入首尾空格过滤

 <body>
<div id="root">
        <form @submit.prevent="submit">
        账号：<input type="text" v-model="personInfo.username"><br><br>
        密码：<input type="password" v-model="personInfo.password"><br><br>
        性别：
        男：<input type="radio"  v-model="personInfo.sex" value="man">
        女：<input type="radio"  v-model="personInfo.sex" value="women">
        <br><br>
        爱好：
        Vue <input type="checkbox"  v-model="personInfo.hobby" value="Vue">
        JS <input type="checkbox"  v-model="personInfo.hobby" value="JS">
        JAVA <input type="checkbox"  v-model="personInfo.hobby" value="JAVA">
        <br><br>
        城市：
        <select v-model="personInfo.city">
            <option value="">请选择你的城市</option>
            <option value="beijing">北京</option>
            <option value="jiangxi">江西</option>
            <option value="guangzhou">广州</option>
        </select>
        <br><br>
        其他信息：
        <textarea v-model="personInfo.other"></textarea>
        <br><br>
        <input type="checkbox" v-model="personInfo.agree">
        我已详细阅读该协议<a href="javascript:;">《协议》</a>
        <br><br>
        <button type="submit">提交</button>
    </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                personInfo:{
                    username:"",
                    password:"",
                    sex:"",
                    hobby:[],
                    city:"",
                    other:"",
                    agree:""
                }
            },
            methods:{
                submit(){
                    console.log(JSON.stringify(this.personInfo));
                }
            }
        })
    </script>
</body>

posted @ 2022-07-17 17:56 小罗要有出息阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue基础知识

· Vue条件渲染

· Vue收集表单数据

· Vue之表单元素

· 13_收集表单数据

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue收集表单数据

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	收集表单数据：
	若<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：输入首尾空格过滤

	<body>
	<div id="root">
	<form @submit.prevent="submit">
	账号：<input type="text" v-model="personInfo.username"><br><br>
	密码：<input type="password" v-model="personInfo.password"><br><br>
	性别：
	男：<input type="radio" v-model="personInfo.sex" value="man">
	女：<input type="radio" v-model="personInfo.sex" value="women">
	<br><br>
	爱好：
	Vue <input type="checkbox" v-model="personInfo.hobby" value="Vue">
	JS <input type="checkbox" v-model="personInfo.hobby" value="JS">
	JAVA <input type="checkbox" v-model="personInfo.hobby" value="JAVA">
	<br><br>
	城市：
	<select v-model="personInfo.city">
	<option value="">请选择你的城市</option>
	<option value="beijing">北京</option>
	<option value="jiangxi">江西</option>
	<option value="guangzhou">广州</option>
	</select>
	<br><br>
	其他信息：
	<textarea v-model="personInfo.other"></textarea>
	<br><br>
	<input type="checkbox" v-model="personInfo.agree">
	我已详细阅读该协议<a href="javascript:;">《协议》</a>
	<br><br>
	<button type="submit">提交</button>
	</form>
	</div>
	<script>
	Vue.config.productionTip = false;
	new Vue({
	el:"#root",
	data:{
	personInfo:{
	username:"",
	password:"",
	sex:"",
	hobby:[],
	city:"",
	other:"",
	agree:""
	}
	},
	methods:{
	submit(){
	console.log(JSON.stringify(this.personInfo));
	}
	}
	})
	</script>
	</body>