收集表单数据:
       若: <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:输入首尾空格过滤 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <!-- Each snowflake is a letter from the sky.
  5.           每片雪花都是天空的一封来信。 -->
  6.         <meta charset="UTF-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.         <title>vue收集表单数据</title>
  10.         <!-- 引用vue文件 -->
  11.         <script type="text/javascript" src="../study01/js/vue.js"></script>
  12.         <!-- css  样式 -->
  13.         <style>
  14.         #root{
  15.             margin:0 auto;
  16.             width: 1100px;
  17.             height: 700px;
  18.             border: 1px solid black;
  19.         }
  20.         #root form{
  21.         margin-left: 250px;
  22.  
  23.         }
  24.         h1{
  25.         text-align: center;
  26.         }
  27.         a{
  28.             text-decoration: none;
  29.         }
  30.     </style>
  31.  
  32.     </head>
  33.     <body>
  34.         <!-- 收集表单数据:
  35.        若: <input type="text"/>, 则v-model收集 的是value值，用户输入的就是value值。
  36.  
  37.        若: <input type= "radio"/>,则v-model收 集的是value值，且要给标签配置value值。
  38.  
  39.     若: <input type=" checkbox"/>
  40.      1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
  41.      2.配置input的value属性:
  42.  
  43.     (1 )v-mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
  44.     (2)v-mode1的初始值是数组，那么收集的的就是value组成的数组
  45.  
  46.     备注: v-mode1的三 个修饰符:
  47.       lazy:失去焦点再收集数据
  48.       number:输入字符串转为有效的数字
  49.        trim:输入首尾空格过滤 -->
  50.         <div id="root">
  51.             <h1>杰然学生表册</h1>
  52.             <!-- 表单提交控制台  @submit.prevent="demoput"-->
  53.             <form @submit.prevent="demoput">
  54.                 <!-- 交互表单  label -->
  55.                 <label for="useName">账号：</label>
  56.                 <!-- v-model.trim   trim 去掉前后输入的空格-->
  57.                 <input type="text" id="useName" v-model.trim="userInfo.useName"> <br /><br />
  58.                 <label for="passName">密码：</label>
  59.                 <input type="password" id="passName" v-model="userInfo.passName"> <br /><br/>
  60.                 <label for="passName">年龄：</label>
  61.                 <!-- v-model 也是有修饰符  年龄防止提交到数据库为字符串报错 去除引号-->
  62.                 <input type="number" id="age" v-model.number="userInfo.age"> <br /><br/>
  63.                 <!-- 性别单选框 -->
  64.                 <label for="checkbox01">性别：</label>
  65.                 <label for="man"> 男</label>
  66.                 <input type="radio" id="man" name="sex" value="male"
  67.                     v-model="userInfo.sex" />
  68.                 <label for="woman">女</label>
  69.                 <input type="radio" id="woman" name="sex" value="female"
  70.                     v-model="userInfo.sex" /><br/><br />
  71.                     <!-- 爱好 多选框 -->
  72.                     <span>爱好：</span>
  73.                     <label for="basketball">篮球</label>
  74.                     <input type="checkbox" id="basketball" v-model="userInfo.habby" value="basketball">
  75.                     <label for="football">足球</label>
  76.                     <input type="checkbox" id="football"v-model="userInfo.habby" value="football">
  77.                     <label for="game">打游戏</label>
  78.                     <input type="checkbox" id="game"v-model="userInfo.habby" value="game"><br/><br />
  79.                         <!-- 校区  下拉框 -->
  80.                         <span>所属校区：</span>
  81.                         <select v-model="userInfo.city">
  82.                             <option value="">请选择校区</option>
  83.                             <option value="yunnan">云南</option>
  84.                             <option value="zhaotong">昭通</option>
  85.                             <option value="lijiang">丽江</option>
  86.                             <option value="wenshan">文山</option>
  87.                             <option value="chengjiang">澄江</option>
  88.                         </select><br/><br />
  89.                             <!-- 更多信息   多行文本框 -->
  90.                             <span>更多信息</span>
  91.                             <!--  v-model.lazy  修饰符  在失去焦点的一瞬间才收集 -->
  92.                             <textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/><br />
  93.                             <input type="checkbox" v-model="userInfo.sgree"> 我也阅读和接收
  94.                             <a href="www.baidu.com">《用户协议》</a><br/><br />
  95.                             <button>提交数据</button>
  96.                 </form>
  97.            </div>
  98.         <script type="text/javascript">
  99.             Vue.config.productionTip=false;//阻止运行时提示开发版本
  100.               new Vue({
  101.                 el:"#root",
  102.                 data:{
  103.                     //  userInfo 管理用户信息
  104.                 userInfo:{
  105.                 useName:'',
  106.                 passName:'',
  107.                 age,
  108.                 sex:'male',
  109.                 habby:[], // habby 初始值可以影响v-moddel的初始值  复选框可以写成数组形式[]
  110.                 city:"",
  111.                 other:'',
  112.                 sgree:''
  113.                 }
  114.                 },
  115.                 methods:{
  116.                     demoput(){
  117.                         // 提交表单信息到控制台 userInfo直接换成_data也可以
  118.                         console.log(JSON.stringify(this.userInfo))
  119.                     }
  120.                 },
  121.                 })
  122.         </script>
  123.     </body>
  124.   </html>

　　

vue 收集表单数据 （有错误的请各位大佬指点）的更多相关文章

  1. 2016/05/13 Thinkphp 3.2.2 ①数据添加 ②收集表单数据入库操作 ③数据修改操作

    ①数据查询 add() 该方法返回被添加的新记录的主键id值 两种方式实现数据添加 数组方式数据添加 $goods = D(“Goods”); $arr = array(‘goods_name’=&g ...

  2. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

  3. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  4. jquery收集表单数组及去掉字符串最后的逗号！

    jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...

  5. php收集表单数据-$GET和$POST的区别

    学习笔记: $_GET 变量 预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值. 从带有 GET 方法的表单发送的信息(例如:http://www.r ...

  6. PHP通过get方法获得form表单数据方法总结

    下面给大家带来具体的代码示例: 1.form表单代码示例(表单get提交)   1 2 3 4 5 6 7 8 9 10 11 12 13 14 <head>   <meta cha ...

  7. 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

  8. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...

  9. 【ASP.NET 问题】System.InvalidOperationException: 对象的当前状态使该操作无效 【大量表单数据提交】错误解决

    出现的问题描述: 当页面的数据量比较大时,出现异常,详细信息: System.InvalidOperationException: 对象的当前状态使该操作无效 问题的原因:出现这个异常的原因是因为微软 ...

随机推荐

  1. 说说对 SQL 语句优化有哪些方法？（选择几条）

    1.Where 子句中:where 表之间的连接必须写在其他 Where 条件之前,那些可 以过滤掉最大数量记录的条件必须写在 Where 子句的末尾.HAVING 最后. 2.用 EXISTS 替代 ...

  2. Django的models中filter的各种用法及官方手册的网址

    __exact 精确等于 like 'aaa' __iexact 精确等于 忽略大小写 ilike 'aaa' __contains 包含 like '%aaa%' __icontains 包含 忽略 ...

  3. LVS 工作图

    一.工作模式 1.NAT模式 -----主要是修改目标IP地址为RS的IP地址.即请求进入负载均衡器时做DNAT,响应出负载均衡器时做SNAT. 工作方式: 1)客户端请求网站,经过路由器到达负载均衡 ...

  4. Python - random库介绍

  5. 每天坚持一个CSS——社会人

    每天一个CSS-社会人 实现效果 想法 之前看到一篇博客,使用python绘制出了小猪佩奇,所以自己想试一试,采用纯html + CSS绘制出低配版的小猪佩奇. 实现思路 使用上一篇,圆与边框实现.最 ...

  6. pushbutton 移动端弹出列表选择框

    pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢. demo地址: ...

  7. html5知识点补充—mark元素的使用

    使用mark元素高亮文本 利用mark元素,文档作者可以高亮显示文档中的某些文本以达到醒目的效果. 如果用户在站点进行搜索,搜索页面中的关键字可以高亮显示.这时,就可以很好的利用到mark元素.不选用 ...

  8. 用Weex开发的V2EX三端app，附探坑总结

    项目地址 git传送门(内附项目预览) Weex环境配置 npm install -g weex npm install -g weexpack # weex客户端的cli npm install - ...

  9. 小程序开发之一（使用fly进行http封装）

    原文地址:http://callmesoul.cn 下载fly js文件 fly小程序文档 /api/config.js 配置,主要配置全局的host url和request拦截和request拦截 ...

  10. 使用React实现一个TodoList案例

    1.效果图: 2.项目源码 3.源码 TodoList.js import React, { Component, Fragment } from 'react'; import TodoItem f ...