vue 收集表单数据 （有错误的请各位大佬指点）
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Each snowflake is a letter from the sky.
每片雪花都是天空的一封来信。 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue收集表单数据</title>
<!-- 引用vue文件 -->
<script type="text/javascript" src="../study01/js/vue.js"></script>
<!-- css 样式 -->
<style>
#root{
margin:0 auto;
width: 1100px;
height: 700px;
border: 1px solid black;
}
#root form{
margin-left: 250px; }
h1{
text-align: center;
}
a{
text-decoration: none;
}
</style> </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-mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
(2)v-mode1的初始值是数组，那么收集的的就是value组成的数组 备注: v-mode1的三 个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤 -->
<div id="root">
<h1>杰然学生表册</h1>
<!-- 表单提交控制台 @submit.prevent="demoput"-->
<form @submit.prevent="demoput">
<!-- 交互表单 label -->
<label for="useName">账号：</label>
<!-- v-model.trim trim 去掉前后输入的空格-->
<input type="text" id="useName" v-model.trim="userInfo.useName"> <br /><br />
<label for="passName">密码：</label>
<input type="password" id="passName" v-model="userInfo.passName"> <br /><br/>
<label for="passName">年龄：</label>
<!-- v-model 也是有修饰符 年龄防止提交到数据库为字符串报错 去除引号-->
<input type="number" id="age" v-model.number="userInfo.age"> <br /><br/>
<!-- 性别单选框 -->
<label for="checkbox01">性别：</label>
<label for="man"> 男</label>
<input type="radio" id="man" name="sex" value="male"
v-model="userInfo.sex" />
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="female"
v-model="userInfo.sex" /><br/><br />
<!-- 爱好 多选框 -->
<span>爱好：</span>
<label for="basketball">篮球</label>
<input type="checkbox" id="basketball" v-model="userInfo.habby" value="basketball">
<label for="football">足球</label>
<input type="checkbox" id="football"v-model="userInfo.habby" value="football">
<label for="game">打游戏</label>
<input type="checkbox" id="game"v-model="userInfo.habby" value="game"><br/><br />
<!-- 校区 下拉框 -->
<span>所属校区：</span>
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="yunnan">云南</option>
<option value="zhaotong">昭通</option>
<option value="lijiang">丽江</option>
<option value="wenshan">文山</option>
<option value="chengjiang">澄江</option>
</select><br/><br />
<!-- 更多信息 多行文本框 -->
<span>更多信息</span>
<!-- v-model.lazy 修饰符 在失去焦点的一瞬间才收集 -->
<textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/><br />
<input type="checkbox" v-model="userInfo.sgree"> 我也阅读和接收
<a href="www.baidu.com">《用户协议》</a><br/><br />
<button>提交数据</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止运行时提示开发版本
new Vue({
el:"#root",
data:{
// userInfo 管理用户信息
userInfo:{
useName:'',
passName:'',
age,
sex:'male',
habby:[], // habby 初始值可以影响v-moddel的初始值 复选框可以写成数组形式[]
city:"",
other:'',
sgree:''
}
},
methods:{
demoput(){
// 提交表单信息到控制台 userInfo直接换成_data也可以
console.log(JSON.stringify(this.userInfo))
}
},
})
</script>
</body>
</html>
vue 收集表单数据 （有错误的请各位大佬指点）的更多相关文章
- 2016/05/13 Thinkphp 3.2.2 ①数据添加 ②收集表单数据入库操作 ③数据修改操作
①数据查询 add() 该方法返回被添加的新记录的主键id值 两种方式实现数据添加 数组方式数据添加 $goods = D(“Goods”); $arr = array(‘goods_name’=&g ...
- React事件处理、收集表单数据、高阶函数
3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...
- Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
- jquery收集表单数组及去掉字符串最后的逗号！
jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...
- php收集表单数据-$GET和$POST的区别
学习笔记: $_GET 变量 预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值. 从带有 GET 方法的表单发送的信息(例如:http://www.r ...
- PHP通过get方法获得form表单数据方法总结
下面给大家带来具体的代码示例: 1.form表单代码示例(表单get提交) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head> <meta cha ...
- 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
- vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...
- 【ASP.NET 问题】System.InvalidOperationException: 对象的当前状态使该操作无效 【大量表单数据提交】错误解决
出现的问题描述: 当页面的数据量比较大时,出现异常,详细信息: System.InvalidOperationException: 对象的当前状态使该操作无效 问题的原因:出现这个异常的原因是因为微软 ...
随机推荐
- ClassLoader如何加载class ？
jvm里有多个类加载,每个类加载可以负责加载特定位置的类,例如,bootstrap类加载负责加载jre/lib/rt.jar中的类, 我们平时用的jdk中的类都位于rt.jar中.extclasslo ...
- Java 线程池中 submit() 和 execute()方法有什么区别？
两个方法都可以向线程池提交任务,execute()方法的返回类型是 void,它定义在 Executor 接口中. 而 submit()方法可以返回持有计算结果的 Future 对象,它定义在 Exe ...
- thrift使用和源码分析
1 前言 thrift的官方文档比较差,很多细节没有介绍清楚,比如require.optional和default字段的区别是什么,为什么字段前面要写序号等,带着这些疑问,我们需要阅读生成的源码来了解 ...
- spring-boot关于spring全注解IOC
什么是IOC容器: Spring IoC 容器是一个管理Bean 的容器,在S pring 的定义中,它要求所有的IoC 容器都需要实现接口BeanFactory ,它是一个顶级容器接口 IoC 是一 ...
- 学习DNS（二）
DNS出现及演化 网络出现的早期 是使用IP地址通讯的,那时就几台主机通讯.但是随着接入网络主机的增多,这种数字标识的地址非常不便于记忆,UNIX上就出现了建立一个叫做hosts的文件(Linux和w ...
- python计算项目净现值和内部回报率
代码: import numpy as np from numpy import irr import warnings def project(number, period_list): rate ...
- jsp+servlet上传excel并将数据导入到数据库表的实现方法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Smith数的判断
题目描述: smith数是指满足下列条件的可分解的整数: 其所有位数上的数字和等于其全部素数因子的数字之和. 例如,9975是smith数,9975=3*5*5*7*19,即9975的数字和=因子的数 ...
- three车辆自由转弯（vue 极品飞车）
//最近没有时间整理代码,就这样吧 <template> <div> <div id="map"></div> </div&g ...
- EMS查看及修改邮箱发送和接受邮件大小的方法
默认情况下,新建用户邮箱没有进行单独设置,故用户邮箱默认值为"Unlimited"(未限制),即遵从全局设置(继承邮箱数据库策略).通过EMS查看用户邮箱发送和接受邮件大小的默认值 ...