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中的引用类型
强引用(Strong) 就是我们平时使用的方式 A a = new A();强引用的对象是不会被回收的 软引用(Soft) 在jvm要内存溢出(OOM)时,会回收软引用的对象,释放更多内存 弱引用(W ...
- Java 中 ++ 操作符是线程安全的吗？
不是线程安全的操作.它涉及到多个指令,如读取变量值,增加,然后存 储回内存,这个过程可能会出现多个线程交差.
- 学习ITIL
ITIL IT运维管理体系: IT管理中的PPT(people人:process流程:technology技术): 标准化(是否有紧急故障处理流程).工具化: 备份解决方案:灾备解决方案: 监控解决方 ...
- html5系列：form 2.0 新结构
以往的一个form表单,结构比较死板,所有的form元素都必须处在<form>和</form>之间才有效,这会造成一些麻烦,比如说:像bootstrap这种使用<div& ...
- 活字格发布新版本，插件公开，引领Web开发新潮流
日前,活字格Web 应用生成平台发布V4.0版本,首次公开插件机制,强大的扩展性和系统集成能力,引起业内瞩目. 活字格是由西安葡萄城自主研发的 Web 应用生成平台,提供易用的类Excel可视化设计器 ...
- Initialization failed for 'https://start.spring.io
本文精华(没空的小伙伴,直接看精华部分即可) 1.精华1: 开发/下载项目的时候考虑系统必备的版本兼容性 2.精华2: 通过火狐浏览器访问官网的旧版本,下载到任意需要的项目版本,然后通过项目导入ide ...
- python爬虫---爬取王者荣耀全部皮肤图片
代码: import requests json_headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win ...
- CCF201604-2俄罗斯方块
问题描述 俄罗斯方块是俄罗斯人阿列克谢·帕基特诺夫发明的一款休闲游戏. 游戏在一个15行10列的方格图上进行,方格图上的每一个格子可能已经放置了方块,或者没有放置方块.每一轮,都会有一个新的由4个小方 ...
- IDEA中Tomcat找不到war包导出按钮解决办法
解决办法 (1) 打开Idea,点击File,然后点击Project Structure-,进入项目结构 (2) 具体步骤看下图: (3) 具体步骤如下图: (4) 具体步骤如下图: (5) 问题解决 ...
- css3，css的基础全局运用
浮动 1.浮动起来的盒子不占用位置,浮动了一个盒子下面的标准流的盒子会顶上来 可用清除浮动的方法来解决标准流会顶替位置的问题 清除浮动给父盒子加overflow: hidden; 鼠标经过事件 : ...