使用Vue收集表单数据

最新推荐文章于 2024-06-09 20:17:27 发布

我爱布朗熊

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量316

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126687926

版权

收集表单数据：

若<input type="text"/>,则v-model收集的是value的值，用户输入的就是value

若<input type="radio"/>,则v-model收集的是value的值，且要给标签配置value

若<input type="checkbox"/>

1.没有配置input的value属性，那么手机的就是checked（勾选true or 未勾选false）

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

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

lazy：失去焦点再收集数据

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

trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>

    <body>
        <!-- 提前说明 v-model是手机value值 -->
         <div id="root">

            <!-- 只要表单提交，我们就调用demo方法 -->
            <form @submit="demo">
                <!-- for="demo"  就是为id为demo的服务 -->
                <!-- 这个label的目的，就是将“账号”和下面那个input框联系在一起，当我们点击“账号”时，我们的input框也能获取到焦点 -->
                <label for="demo">账号：</label>
                <!--v-model.trim去掉前后的空格  -->
                <input type="text" id="demo" v-model.trim="userInfo.account">
                <br/><br/>
                密码：<input type="password" v-model="userInfo.password">
                <br/><br/>
                <!-- type="number"控制用户输入的不能是字母子类的 -->
                <!-- v-model.number 控制传入到Vue中的是数字，而不是字符串 -->
                年龄：<input type="number" v-model.number="userInfo.age">
                <br/><br/>

                性别：
                男<input type="radio" name="sex" value="male"  v-model="userInfo.sex"  >
                女<input type="radio" name="sex" value="female"  v-model="userInfo.sex">
                <br/><br/>

                <!-- 多选框：v-model、value值不能少  其中hobby一定要是数组的方式，不能是字符串的形式 -->
                爱好：
                学习<input type="checkbox"    v-model="userInfo.hobby"  value="study">
                打游戏<input type="checkbox"  v-model="userInfo.hobby"  value="game">
                吃饭<input type="checkbox"    v-model="userInfo.hobby"  value="eat">
                <br/><br/>

                所属校区
                <select v-model="userInfo.city">
                    <!-- selected="selected"默认选择 -->
                    <option value="" selected="selected">请选择校区</option>
                    <option value="beijing" >北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                    
                </select>

                <br/><br/>

                <!-- 这个地方也要双向绑定 -->
                其他信息：
                <!-- v-model.lazy不会实时收集我们在框内打的每一个字，当这个框失去焦点后才会收集框内的信息 -->
                <textarea v-model.lazy="userInfo.other"></textarea>

                <br/><br/>

                <!--这个地方的checkbox已经和刚刚的不一样了  -->
                <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="https://www.baidu.com">《用户协议》</a>
                <br/><br/>
                <button > 提交</button>

            </form>
         </div>

         </body>

         <script type="text/javascript">
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                    userInfo:{
                     account:'',
                     password:'',
                     // 性别默认女
                     sex:'female',
                    // 这个地方的hobby不可以这个样子，否则收到的就是true或者false 而不是value
                     // hobby:''
                     hobby:[],
                     city:'',
                     other:'',
                     agree:'',
                     age:''
                    }

                },
                methods: {
                    demo(){
                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
    
    
    
         </script>   


</html>

我爱布朗熊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Vue收集表单数据

1.没有配置input的value属性，那么手机的就是checked（勾选true or 未勾选false）若,则v-model收集的是value的值，且要给标签配置value。若,则v-model收集的是value的值，用户输入的就是value。2.v-model的初始值是数组，那么收集的就是value组成的数组。number：输入字符串转为有效数字。lazy：失去焦点再收集数据。备注：v-model的三个修饰符。
复制链接

扫一扫