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 集合及其线程安全 及其 set linkedList map table 区别
早在jdk的1.1版本中,所有的集合都是线程安全的.但是在1.2以及之后的版本中就出现了一些线程不安全的集合,为什么版本升级会出现一些线程不安全的集合呢?因为线程不安全的集合普遍比线程安全的集合效率高 ...
- Java 中的final关键字有哪些用法？
(1)修饰类:表示该类不能被继承:(2)修饰方法:表示方法不能被重写:(3)修饰变量:表示变量只能一次赋值以后值不能被修改(常量).
- Java BlockingQueue是什么？
Java BlockingQueue是一个并发集合util包的一部分.BlockingQueue队列是一种支持操作,它等待元素变得可用时来检索,同样等待空间可用时来存储元素.
- 详细描述一下 Elasticsearch 索引文档的过程？
协调节点默认使用文档 ID 参与计算(也支持通过 routing),以便为路由提供合适的分片. shard = hash(document_id) % (num_of_primary_shards) ...
- 4.RDD操作
目录 一. RDD创建 从本地文件系统中加载数据创建RDD 从HDFS加载数据创建RDD 通过并行集合(列表)创建RDD 二. RDD操作 转换操作 filter(func) map(func) fl ...
- NetCore微服务实现事务一致性masstransit之saga使用
demo如下,一个订单处理的小例子: 首先看看结果很简单: 核心代码如下: using MassTransit; using Microsoft.Extensions.DependencyInject ...
- [源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑
[源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑 目录 [源码解析] TensorFlow 分布式环境(7) --- Worker 动态逻辑 1. 概述 1.1 温 ...
- 深入理解 flex-grow & flex-shrink & flex-basis
前言 flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto. 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个 ...
- 一个html标签到底包含了多少信息(1)
先来看一段代码: var dom = document.querySelector('body'); for(var i in dom){ console.log(i,dom[i]) } 可以看到很多 ...
- Web 开发中 Blob 与 FileAPI 使用简述
本文节选自 Awesome CheatSheet/DOM CheatSheet,主要是对 DOM 操作中常见的 Blob.File API 相关概念进行简要描述. Web 开发中 Blob 与 Fil ...