当前位置：首页 > news >正文

Vue——day08之收集表单数据

news 2025/8/2 12:16:35

代码讲解

HTML结构

表单部分

Vue.js部分

总结

整体代码

效果展示

总结

代码讲解

HTML结构

DOCTYPE声明和基础设置:
- 声明HTML文档的类型为HTML5，并设置字符编码为UTF-8，确保页面内容可以正确显示。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于确保页面在移动设备上可以正确缩放和显示。
引入Vue.js库:
- 使用<script>标签引入了外部的Vue.js文件，为页面提供Vue.js的支持，使得接下来的Vue代码能够工作。

表单部分

Vue.js实例挂载点:
- <div id="root">：这个div是Vue.js实例的挂载点，所有的Vue.js数据绑定和操作都在这个div内进行。
表单和数据绑定:
- 表单元素使用v-model指令与Vue.js的数据模型进行双向绑定：
  - 账号和密码字段使用.trim修饰符，确保输入的数据去除了首尾空格。
  - 年龄字段使用.number修饰符，将输入的数据强制转换为数字类型。
  - 性别单选按钮和爱好复选框与Vue数据模型绑定，选择的值会存储在对应的Vue模型属性中。
  - 所属城市下拉框与userInfo.city绑定，存储用户选择的城市。
  - 其他信息文本区域使用.lazy修饰符，确保数据在失去焦点时才更新模型。
  - 阅读并接受用户协议复选框绑定userInfo.agree，用于表示用户是否同意协议。
阻止表单的默认提交行为:
- @submit.prevent="demo": Vue.js的事件处理器，阻止表单的默认提交行为，转而调用demo方法来处理提交。

Vue.js部分

Vue实例的创建:
- 通过new Vue()创建一个Vue实例，并绑定到页面上的#root元素，控制整个页面的交互和数据。
数据模型data:
- data对象中包含了userInfo对象，用于存储用户的表单输入数据（如账号、密码、年龄、性别、爱好、城市、其他信息和用户协议的同意状态）。
方法methods:
- 定义了一个demo方法，当表单提交时会触发该方法，该方法将当前userInfo对象转换为JSON字符串并打印到控制台中。

总结

这段代码通过Vue.js实现了一个动态表单，用户在输入或选择表单内容时，数据会自动更新到Vue的数据模型userInfo中。当用户点击提交按钮时，表单的默认提交行为被阻止，取而代之的是调用Vue方法，将收集到的表单数据显示在控制台中。

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root"><!-- prevent:阻止表单提交的默认行为 --><form @submit.prevent="demo"><!-- .trim:去除前后的空格 -->账号：<input type="text" v-model.trim="userInfo.account"><br><br>密码：<input type="password" v-model.trim="userInfo.password"><br><br><!-- .number:锁死类型为number类型了 -->年龄：<input type="number" v-model.number="userInfo.age"><br><br>性别：男<input type="radio" name="sex" value="男" v-model="userInfo.sex">女<input type="radio" name="sex" value="女" v-model="userInfo.sex"><br><br>爱好：学习<input type="checkbox" value="学习" v-model="userInfo.hobby">飞飞机<input type="checkbox" value="飞飞机" v-model="userInfo.hobby">看比赛<input type="checkbox" value="看比赛" v-model="userInfo.hobby"><br><br>所属城市<select v-model="userInfo.city"><option value="">请选择城市</option><option value="成都">成都</option><option value="哈尔滨">哈尔滨</option><option value="深圳">深圳</option><option value="新疆">新疆</option></select><br><br>其他信息：<!-- .lazy:懒加载，使这个模块失去焦点的瞬间才会被加载数据 --><textarea v-model.lazy="userInfo.otherInfo"></textarea><br><br><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://wenjgo.blog.csdn.net">《用户协议》</a><br><br><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:'',sex:'男',hobby:[],city:'',otherInfo:'',agree:''}},methods: {demo(){// console.log(JSON.stringify(this._data))console.log(JSON.stringify(this.userInfo))}}});
</script>
</html>

效果展示

总结

收集表单数据:

若是文本框（<input type="text"/>），则使用v-model收集的是value值，用户输入的就是value值。

若是单选框（<input type="radio"/>），则使用v-model收集的是value值，需要给标签配置value值。

若是复选框（<input type="checkbox" />）：

若没有配置input的value属性，v-model收集的是checked值（勾选或未勾选，是布尔值）。
若配置了input的value属性： (1) 若v-model的初始值是非数组，v-model收集的是checked值（勾选或未勾选，是布尔值）。 (2) 若v-model的初始值是数组，v-model收集的是value组成的数组。

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