(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了
1.使用v-model对表单数据自动收集
1)text/textare----单行/多行输入框
2)checkbox----多选
3)radio----单选
4)select----下拉框
2.
3.test012.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<!--.prevent阻止默认行为-->
<form action="/xxx" @submit.prevent="handleSubmit">
<span>用户名:</span>
<input type="text" v-model="username"><br> <span>密码:</span>
<input type="password" v-model="pwd"><br> <span>性别:</span>
<!--value="女"希望女被选中-->
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br> <span>爱好:</span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="football" value="foot" v-model="likes">
<label for="football">足球</label>
<input type="checkbox" id="golf" value="golf" v-model="likes">
<label for="golf">高尔夫</label>
<input type="checkbox" id="vollay" value="vollay" v-model="likes">
<label for="vollate">排球</label><br> <span>城市:</span>
<select v-model="cityId">
<option value="">未选择</option>
<!--最终提交过去的是id,所以value="city.id",因为city.id是文本,故写成:value-->
<option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
</select><br>
<span>介绍:</span>
<textarea rows="10" v-model="description"></textarea><br><br> <input type="submit" value="注册">
</form>
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
username: '',
pwd:'',
//女是跟value的值匹配
sex:'女',
//多选应该是数组
likes:['foot'],
allCitys: [{id:1,name:'BJ'},{id:2,name:'SH'},{id:3,name:'GD'}],
cityId: '3',
description:''
},
methods:{
handleSubmit(){
console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.description)
}
}
})
</script>
</body>
</html>
4.点击submit可以通过console控制台看到提交的数据;也可以通过vue来查看
(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)的更多相关文章
- vue 收集表单数据 (有错误的请各位大佬指点)
收集表单数据: 若: <input type="text"/>, 则v-model收集 的是value值,用户输入的就是value值. 若 ...
- Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
- HTML表单 在提交之前 验证表单数字合法性
function checkform(){ if(!isNumeric($('.apply_money').val())){ alert("必须是数字"); return fals ...
- 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属性指定事件处理函数(注意大小写) ...
- jquery收集表单数组及去掉字符串最后的逗号!
jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
- Oracle数据库,join多表关联方式、union结果集合并
join on : 多表关联 内连接 :与其他表连接 from 表1 t join 表2 s on t.字段1 =s.字段2 join 表3 n on n.字段3=t.字段1 或 from 表1 ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
随机推荐
- LeetCode第8场双周赛(Java)
这次我只做对一题. 原因是题目返回值类型有误,写的是 String[] ,实际上应该返回 List<String> . 好吧,只能自认倒霉.就当涨涨经验. 5068. 前后拼接 解题思路 ...
- 路由Routers
路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...
- Unity的学习笔记(鼠标移动控制视角移动)
using UnityEngine; public class MouseLook : MonoBehaviour { , MouseX = , MouseY = } //定义一个枚举,移动xy,或者 ...
- 使用mavan构建自定义项目脚手架
首先抛出一个问题是为什么要构建自定义的脚手架,maven已经为了我么提供了很多脚手架,方便我们快速的创建一个普通java项目或者是web项目,然而在实际开发中,例如银行项目,大部分都是ssm架构,我们 ...
- java报错与解决方法总结
错误 error:Syntax error, insert ")" to complete MethodDeclaration 解决办法:放到main方法里 错误原因: 错误: e ...
- 【转载】C#中List集合First和FirstOrDefault方法有何不同
在C#的List集合中查找一个符合条件的元素,一般我们会用First方法或者FirstOrDefault方法来返回第一个符合条件的对象,First方法和FirstOrDefault的调用都是使用Lam ...
- Http 请求头包含哪些信息?
协议头 说明 示例 状态 Accept 可接受的响应内容类型(Content-Types). Accept: text/plain 固定 Accept-Charset 可接受的字符集 Accept-C ...
- Air for ANE:打包注意的地方
来源:http://blog.csdn.net/hero82748274/article/details/8631982 今天遇到了一个打包ANE 文件的问题,导致花费了几个小时查找,最后师弟的一句话 ...
- HTTP协议复习二--代理
代理(Proxy)是HTTP协议中请求方和应答方中间的一个环节,作为“中转站”,既可以转发客 户端的请求,也可以转发服务器的应答.代理有很多的种类,常见的有:1.匿名代理:完全“隐匿”了被代理的机器, ...
- 用户在浏览器输入URL回车之后,浏览器都做了什么
在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...