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

收集表单数据:

若: <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:输入首尾空格过滤

<!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 收集表单数据（有错误的请各位大佬指点）

最新文章

热门文章

巴特西

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

最新文章

热门文章

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