• 收集表单数据Vue

    表单提交后会跳走，

    阻止其跳走

    @submit.prevent

     

     

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <form>
    11.         账号：<input type="text"><br>
    12.         密码：<input type="password"><br>
    13.         性别：
    14.         <input type="radio" name="sex">男 
    15.         <input type="radio" name="sex">女<br>
    16.         爱好：
    17.         <input type="checkbox">学习 
    18.         <input type="checkbox">打游戏 
    19.         <input type="checkbox">吃饭<br>
    20.         所属校区
    21.         <select>
    22.             <option>福州option>
    23.             <option>泉州option>
    24.             <option>三明option>
    25.             <option>宁德option>
    26.         select>
    27.         <br>
    28.         <br>
    29.         <br>
    30.         <br>
    31.         <br>
    32.         其他信息：<textarea>textarea><br>
    33.         阅读并接受<a href="#">《用户协议》a>
    34.     form>
    35. body>
    36. html>

    ，则v-model收集的是value值，用户输入的就是value值。 

     ，则v-model收集的是value值，且要给标签配置value值。

           

     收集表单数据：

    若：

    若：，则v-model收集的是value值，且要给标签配置value值。

    若：

            1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

            2.配置input的value属性:

             (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

             (2)v-model的初始值是数组，那么收集的的就是value组成的数组

                 备注：v-model的三个修饰符：

                         lazy：失去焦点再收集数据

                         number：输入字符串转为有效的数字

                         trim：输入首尾空格过滤

    Vue的部分

     用一个大盒子div将表单装入

    1. <div id="root">
    2. // 表单的内容
    3. div>

    v-model 是默认收集

    value值

    在写性别的时候要加上相对应的性格才能被Vue取到值

    1.     new Vue({
    2.         el:"root",
    3.         data:{
    4.             userInfo:{
    5.                 account:'',
    6.                 password:'',
    7.                 age:'',
    8.                 sex:'',
    9.                 hobby:'',
    10.                 city:'',
    11.                 other:'',
    12.                 agree:''
    13.             }
    14.         }
    15.     })

    将所有的数据全部放在data的userInfo里面！！！

    方便统一的收集。

    1. <body>
    2.     <div id="root">
    3.         <form>
    4.             账号：<input type="text" v-model="userInfo.account"><br>
    5.             密码：<input type="password" v-model="userInfo.password"><br>
    6.             性别：
    7.             <input type="radio" name="sex" v-model="userInfo.sex" value="male">男
    8.             <input type="radio" name="sex" v-model="userInfo.sex" value="female">女<br>
    9.             爱好：
    10.             <input type="checkbox" v-model="userInfo.hobby" value="study">学习
    11.             <input type="checkbox" v-model="userInfo.hobby" value="game">打游戏
    12.             <input type="checkbox" v-model="userInfo.hobby" value="eat">吃饭<br>
    13.             所属校区
    14.             <select v-model="userInfo.city">
    15.                 <option>请选择校区option>
    16.                 <option value="fz">福州option>
    17.                 <option value="qz">泉州option>
    18.                 <option value="sm">三明option>
    19.                 <option value="nd">宁德option>
    20.             select>
    21.             <br>
    22.             <br>
    23.             <br>
    24.             <br>
    25.             <br>
    26.             其他信息：<textarea v-model="userInfo.other">textarea><br>
    27.             <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》a>
    28.             <button>提交button>
    29.         form>
    30.     div>
    31. body>

    checkbox的初始值 收被绑定的value值的初值影响

    所以要使用数组的形式去储存checkbox所选中的变量

     

    对于age来说要求收集到的是数字而不是字符串。

    使用v-model的修饰符number：输入字符串转为有效的数字。

    年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>

    checkbox：

    hobby的属性初始值为空的字符串，当获取value值的时候，会根据初始值的状态去判断收集到的数据类型。

    因此，我们应该选择使用数组的形式去储存checkbox所选中的变量！！！

    对于，同意并且接受，直接使用空字符串即可，本意在于判断属性的boolean值。

    总结：

    v-model的三个修饰符：

    lazy：失去焦点再收集数据

    number：输入字符串转为有效的数字

    trim：输入首尾空格过滤

  • 相关阅读:
    通过ad18软件设计一个流量监测报警装置
    弘辽科技：淘宝直通车销量怎么是0？0销量怎么起步
    Python协程(asyncio)（四）同步原语
    GPS定位系统，GPSBDpro-远程车辆视频录像回放
    PostgreSQL13 安装
    2022年Java面试题
    【MySql进阶】索引详解（一）：索引数据页结构
    C++笔记打卡第23天（STL常用算法）
    「架构师合集」
    js：动态导入script脚本文件
  • 原文地址：https://blog.csdn.net/qq_53721052/article/details/127652283