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

Vue-收集表单信息

article 2025/8/29 15:10:44

收集表单信息

Input

label for 和 input id 关联, 点击账号标签也能聚焦 input

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- label for 和 input id 关联, 点击账号标签 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",},methods: {},});</script>
</html>

运行效果

初始化

在这里插入图片描述

填写 账号、密码

在这里插入图片描述

Radio

name=‘xxx’ 归为一组实现互斥选择
指定自定义value值否则默认为 true/false

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联  点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组  实现互斥选择 2. 指定自定义value值  否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',},methods: {},});</script>
</html>

运行效果

初始化

在这里插入图片描述

选择性别

在这里插入图片描述

Checkbox (多个)

指定自定义value值否则默认为 true/false
支持多选，需将绑定的变量设置为数组

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联  点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组  实现互斥选择 2. 指定自定义value值  否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值  否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input  type="checkbox" value="爬山" v-model="hobby">爬山<input  type="checkbox" value="健身" v-model="hobby">健身<input  type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><!--<label >所属地区：</label><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input  type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">注册</button> --></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){}},});</script>
</html>

运行效果

初始化

在这里插入图片描述

选择爱好

在这里插入图片描述

Select

单选，必须指定自定义value值

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联  点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组  实现互斥选择 2. 指定自定义value值  否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值  否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input  type="checkbox" value="爬山" v-model="hobby">爬山<input  type="checkbox" value="健身" v-model="hobby">健身<input  type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值  --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",},methods: {},});</script>
</html>

运行效果

初始化

在这里插入图片描述

选择地区

在这里插入图片描述

Textarea

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联  点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组  实现互斥选择 2. 指定自定义value值  否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值  否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input  type="checkbox" value="爬山" v-model="hobby">爬山<input  type="checkbox" value="健身" v-model="hobby">健身<input  type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值  --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:''},methods: {},});</script>
</html>

运行效果

初始化

在这里插入图片描述

输入信息

在这里插入图片描述

Checkbox（单个）

就是要值是true/false, 因此无需自定义value

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联  点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组  实现互斥选择 2. 指定自定义value值  否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值  否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input  type="checkbox" value="爬山" v-model="hobby">爬山<input  type="checkbox" value="健身" v-model="hobby">健身<input  type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值  --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input  type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">提交</button> </div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){console.log("----------------提交表单了----------------")console.log("账号：" + this.account)console.log("密码：" + this.password)console.log("性别：" + this.sex)console.log("爱好：" + this.hobby)console.log("地区：" + this.city)console.log("描述：" + this.description)console.log("已读协议：" + this.read)}},});</script>
</html>