vue 提交form表单

博客提及了HTML和Vue相关内容,HTML是前端基础标记语言,Vue是流行的前端框架,二者在前端开发中都有重要作用,可用于构建网页和Web应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html

 <form>
        <ol>
            <li>您比较喜欢下列哪种运动?</li>
            <label><input type="radio" name="hobby1" value="篮球" v-model="hobby.hobby1" required/>&nbsp;&nbsp;篮球&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby1" value="足球" v-model="hobby.hobby1"/>&nbsp;&nbsp;足球&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="飞盘" v-model="hobby.hobby1"/>&nbsp;&nbsp;飞盘&nbsp;&nbsp; </label>
            <label><input type="radio" name="hobby1" value="no" v-model="hobby.hobby1"/>&nbsp;&nbsp;都不喜欢&nbsp;&nbsp; </label>
            <li>您是否会在每年冬天购置新衣裳?</li>
            <label><input type="radio" name="hobby2" value="1" v-model="hobby.hobby2" required/>&nbsp;&nbsp;是&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby2" value="0" v-model="hobby.hobby2"/>&nbsp;&nbsp;否&nbsp;&nbsp; </label>
            <li>您平常有关注过数码领域吗?</li>
            <label><input type="radio" name="hobby3" value="1" v-model="hobby.hobby3" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby3" value="0" v-model="hobby.hobby3"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>

            <li>您有没有了解过计算机专业的知识吗?</li>
            <label><input type="radio" name="hobby4" value="1" v-model="hobby.hobby4" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby4" value="0" v-model="hobby.hobby4"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您是否会和朋友开黑玩游戏?</li>
            <label><input type="radio" name="hobby5" value="1" v-model="hobby.hobby5" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby5" value="0" v-model="hobby.hobby5"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
            <li>您平常是自己做饭比较多吗?</li>
            <label><input type="radio" name="hobby6" value="1" v-model="hobby.hobby6" required/>&nbsp;&nbsp;有所关注&nbsp;&nbsp;
            </label>
            <label><input type="radio" name="hobby6" value="0" v-model="hobby.hobby6"/>&nbsp;&nbsp;从未关注&nbsp;&nbsp; </label>
        </ol>

        <button @click="submit">提交问卷</button>

    </form>

vue

const vm = new Vue({
        el: '#questionnaire',
        data() {
            return {
                hobby: {
                    hobby1: '',
                    hobby2: '',
                    hobby3: '',
                    hobby4: '',
                    hobby5: '',
                    hobby6: '',
                },
            }
        },
        methods: {
            submit() {
                let formData = new FormData();
                for(var key in this.hobby){
                    formData.append(key,this.hobby[key]);
                }//将数组的值给formdata
                for (var value of formData.values()) {
                    console.log(value);
                }//遍历formdata
                debugger
                console.log(formData);

                //在这里进行上传(axios、ajax)
            }
        },
    })

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值