使用Vue收集表单数据

秒速五厘米 2024-04-07 12:53 54阅读 0赞

收集表单数据：

若<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>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
    
        <body>
            
             <div id="root">
    
                
                <form @submit="demo">
                    
                    
                    <label for="demo">账号：</label>
                    
                    <input type="text" id="demo" v-model.trim="userInfo.account">
                    <br/><br/>
                    密码：<input type="password" v-model="userInfo.password">
                    <br/><br/>
                    
                    
                    年龄：<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/>
    
                    
                    爱好：
                    学习<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">
                        
                        <option value="" selected="selected">请选择校区</option>
                        <option value="beijing" >北京</option>
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                        <option value="wuhan">武汉</option>
                        
                    </select>
    
                    <br/><br/>
    
                    
                    其他信息：
                    
                    <textarea v-model.lazy="userInfo.other"></textarea>
    
                    <br/><br/>
    
                    
                    <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>