自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了

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表单数据的自动手集(表单数据提交,需要收集表单数据)的更多相关文章

  1. vue 收集表单数据 （有错误的请各位大佬指点）

     收集表单数据:        若: <input type="text"/>, 则v-model收集 的是value值,用户输入的就是value值.        若 ...

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

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

  3. HTML表单 在提交之前 验证表单数字合法性

    function checkform(){ if(!isNumeric($('.apply_money').val())){ alert("必须是数字"); return fals ...

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

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

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

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

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

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

  7. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  8. 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 ...

  9. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

随机推荐

  1. PB 奇葩BUG

    1. 在数据窗口的Edit 中选则CHeckBox 后,必须给默认值,否则会导致数据保存不了,也无提示. 2.当使用数据窗口的 setfile()函数时 如果 条件中有两个LIKE 则会报错,一个LI ...

  2. [高清] Java从入门到精通第3版

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  3. PDA日常问题

    一.连接网络异常 1.摩托摩拉3190连接wifi时报错,提示:scan error adapter unavailable 确认网卡是不是禁用状态,CE是右下角有个蓝色的图,上面有个X,点一下,然后 ...

  4. MongoDB 增删改查 Shell使用及操作

    下载链接:https://robomongo.org/download 安装步骤省略,下一步下一步... 图形界面,连接默认,取个名字就行. 连接成功,可以愉快的使用了,不用总是敲命令了,简洁方便,多 ...

  5. Java Service Wrapper将jar包安装成Windows服务

    刚接触java,第一次使用Java开发windows服务,也是刚不久看了SSM框架 简直也是一头雾水,不过只要用心理解,其实很简单,下面有详细的步骤,包学包会 在windows上运行jar包,需要在工 ...

  6. IdentityServer4：发布环境的数字签名证书

    一,jwt的三个组成部件 先来看一个由IdentityServer颁发的一个标准令牌 eyJhbGciOiJSUzI1NiIsImtpZCI6IjBiNTE3ZjIzYWY0OGM4ZjkyZjExM ...

  7. linux ubuntu-16.04-配置java1.8和Tomcat8

    前言 第一次使用linux ubuntu16.04 服务器,所以做一下常用配置的记录. JDK 1.创建存放jdk的目录 一般在usr/local下创建一个java文件夹 cd /usr/local ...

  8. day26-python之封装

    1.动态导入模块 # module_t=__import__('m1.t') # print(module_t) # module_t = __import__('m1.t') # print(mod ...

  9. FreeRTOS计数型信号量

    API函数 //创建 #if( configSUPPORT_DYNAMIC_ALLOCATION == 1 ) #define xSemaphoreCreateCounting( uxMaxCount ...

  10. Step by Step to create orders by consuming SAP Commerce Cloud Restful API

    Recently Jerry is working on an integration project about creating orders in Wechat platform by cons ...