Vue24 收集表单数据实例-拓冰建站

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>收集表单数据</title><script type="text/javascript" src="../js/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><script type="text/javascript">Vue.config.productionTip = falsenew 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>

在这里插入图片描述

Vue24 收集表单数据 实例

实例

相关新闻

阅读笔记（BMSB 2018）Video Stitching Based on Optical Flow

上位机图像处理和嵌入式模块部署（cmake的使用）

6.s081 学习实验记录（十）file system

最新新闻

移动编程革命：Cursor与OpenClaw工具解析

零代码做失物招领APP，我改了4轮需求

工业AI模型压缩：5大技巧解决边缘部署挑战

沈阳正规的软件开发公司哪家可靠

机械合金化技术：金属冶炼的低温高效新路径

MCP协议：大模型与外部系统交互的标准化解决方案

日新闻

【finetuning】Cohere自定义重排序器案例分析

2026生产级RAG检索怎么调优？4种方案对比，零代码提31%召回率附选型表

音乐创作中的 AI 协作模式：辅助型补全型与全自主型定位

周新闻

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

什么是PCTFE？医药高端包装的“防潮王牌“材料

月新闻

[C++]内存管理：串顺序存储的内存回收

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

Vue24 收集表单数据实例