Vue基础(二)-收集表单数据

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

<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号:<input type="text" v-model="userInfo.account"><br><br>
            密码:<input type="password" v-model="userInfo.password"><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="game">
            看电影<input type="checkbox" v-model="userInfo.hobby" value="movie">
            看小说<input type="checkbox" v-model="userInfo.hobby" value="novel">
            <br><br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="gaungzhou">广州校区</option>
                <option value="shenzhen">深圳校区</option>
                <option value="shanghai">上海校区</option>
            </select>
            <br><br>
            其他信息:
            <textarea v-model="userInfo.other"></textarea>
            <br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.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:'male',
            hobby:[],
            city:'guangzhou',
            other:'',
            agree:''
          }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo));
                
            }
        }
    })
</script>
上一篇:【楚怡杯】职业院校技能大赛 “Python程序开发”数据清洗练习


下一篇:【AI知识点】如何对包含异常值的数据进行归一化处理?