vue中的表单数据提交

Posted 2021-11-09 老张在线敲代码

<template>
    <div>
        <form action="" @submit.prevent="handleSubmit">
            <input type="text" placeholder="账户" v-model="username">
            <input type="text" placeholder="密码" v-model="password"><br>
            性别：
            <br>
            男：<input type="radio" value="男" v-model="sex"><br>
            女：<input type="radio" value="女" v-model="sex"><br>
            爱好：敲代码<input type="checkbox" v-model="hobby" value="bianchen"> 听音乐<input type="checkbox" value="music" v-model="hobby"> 玩游戏<input type="checkbox" value="games" v-model="hobby"><br>
            城市：<select v-model="cityId">
              <option value="">未选择</option>
              <option :value="item.id" v-for="(item,index) in allCitys" :key="index">{{item.name}}</option>
            </select><br>
            介绍：<textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea><br>
            注册：<input type="submit" value="注册">
        </form>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                username:"",
                password:"",
                sex:"男",
                hobby:['music'],
                allCitys:[{id:1,name:"山西"},{id:2,name:"北京"},{id:3,name:"山东"},],
                cityId:"2",
                desc:""
            }
        },
        methods:{
            handleSubmit(){
                const {username,password,sex,hobby,cityId,desc} = this
                console.log(username,password,sex,hobby,cityId,desc)
            }
        }
    }
</script>