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

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. WAMP集成环境虚拟路径修改

    只需要改httpd.conf这一个文件就好了. 1.单击右下角wamp图标如下图打开httpd.conf,或者从文件夹打开httpd.conf.

  2. Mysql中HAVING的相关使用方法

    having字句可以让我们筛选分组之后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前. 而having子句在聚合后对组记录进行筛选.我的理解就是真实表 ...

  3. typescript之基础类型

    基础类型分为:数字.字符串.数组.元组.枚举.Any.Object.Null.Undefined.Never.Void 各种类型写法如下: 1.数字(number) let num:number = ...

  4. Form' threw an exception of type 'System.InvalidOperationException'

    环境:VS2017 NetCore 2.2 Razor Layui 在处理异步请求是遇到"((Microsoft.AspNetCore.Http.Internal.DefaultHttpRe ...

  5. Java线程同步类容器和并发容器（四）

    同步类容器都是线程安全的,在某些场景下,需要枷锁保护符合操作,最经典ConcurrentModifiicationException,原因是当容器迭代的过程中,被并发的修改了内容. for (Iter ...

  6. 如何在Oracle触发器中使用查询语句

    通常情况下,Oracle数据库禁止在行级触发器或行级触发器所调用的子程序中使用查询语句.但是,面对复杂的业务逻辑,不可避免的要使用查询语句. 当在行级触发器中使用查询语句时,Oracle数据库会抛出O ...

  7. 【洛谷 P3224】 [HNOI2012]永无乡（Splay，启发式合并）

    题目链接 启发式合并就是暴力合并把小的合并到大的里,一个一个插进去. 并查集维护连通性,同时保证并查集的根就是所在Splay的根,这样能省去很多操作. #include <cstdio> ...

  8. 【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符

    在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...

  9. 巧用CSS3之background渐变

    常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...

  10. web前端布局HTML+CSS

    1.W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).万 ...