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: 对象的当前状态使该操作无效 问题的原因:出现这个异常的原因是因为微软 ...
随机推荐
- java-IO异常处理
以前的异常处理 public class Demo3 { public static void main(String[] args) { //提高fw的作用域 //变量定义的时候可以没有值,但是使用 ...
- 记录md的偏好设置
- python udp socket通信
前段时间学习了一下c++的socket通信,但发现那玩意儿比较复杂还是转向python了,下面就是一个简单的udpsocket通信程序,欢迎大佬前来指正 udp聊天 import socket # 创 ...
- 机器学习 machine learn
机器学习 机器学习 概述 什么是机器学习 机器学习是一门能够让编程计算机从数据中学习的计算机科学.一个计算机程序在完成任务T之后,获得经验E,其表现效果为P,如果任务T的性能表现,也就是用以衡量的P, ...
- 3.3转1.8V(电平转换)
- js中一个函数调用另一个函数变量；判断鼠标按住/手指左右滑动
<script> function myFunction() { var x1=event.clientX;//只需要将被调用的变量前的var删除即可在下个函数调用: document.g ...
- Canvas 与 SVG
什么是SVG? 引用w3c的一段话就是: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...
- nginx开启gzip和缓存配置
# 开启gzip gzip on; # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用C ...
- 深入HTTP协议
一.HTTP定义 超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. HTTP是一个属于应用层的面向对象协议,由于其简捷.快速的方式, ...
- java中String类的用法
1.String String类很常用,很重要. String不像int或float, 它是参考类型.final类型, 不能被继承,String is a Reference Type,Defined ...