2022-03-25 Vue 常用表单提交

作者: 93岁卧床开发 | 来源:发表于2022-03-26 09:22 被阅读0次

2022-03-25 Vue 常用表单提交
From表单提交数据的几种方式
WTForms 字段参数校验
表单
HTML&CSS知识点总结（二）
Web中的常用的两种表单验证
Vue提交表单
HTML表单的用法
Form表单
HTML表单设计

<body>
    <div id="demo">
        <!-- @submit.prevent 阻止事件默认提交行为 -->
        <form action="#" @submit.prevent="submitForm"> 

            姓名(文本)：
            <input type="text" v-model="name"> <br><br> 
            
            性别(单选按钮)：
            <input name="sex" type="radio" value="1" v-model="sex"/>男 
            <input name="sex" type="radio" value="0" v-model="sex"/>女 
            <br><br> 
            
            技能(多选框)： 
            <input type="checkbox" name="skills" value="java" v-model="skills">Java开发 
            <input type="checkbox" name="skills" value="vue" v- model="skills">Vue.js开发 
            <input type="checkbox" name="skills" value="python" v- model="skills">Python开发 
            <br><br> 
            
            城市(下拉框)： 
            <select name="citys" v-model="city">
                <option v-for="c in citys" :value="c.code"> {{c.name}} </option>
            </select> <br><br> 
            
            说明(多行文本)：
            <textarea cols="30" rows="5" v-model="desc"></textarea> <br><br> 
            
            <button type="submit">提交</button> </form>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script type="text/javascript"> 
        var vm = new Vue({
            el: '#demo', data: {
                name: '', 
                sex: '0', //默认选中：女 
                skills: ['vue'], //默认勾选：vue.js开发 
                citys: [ //初始化下拉框 
                    { code: 'bj', name: '北京' }, 
                    { code: 'sh', name: '上海' }, 
                    { code: 'sz', name: '深圳' }
                ], 
                city: 'sh',
                //默认选中:上海, 
                desc: ''
            }, 
            methods: {
                submitForm: function () {
                    //发送ajax请求 
                    alert(this.name + "," + this.sex + "," + this.skills + "," + this.city + "," + this.desc)
                }
            }
        }) 
    </script>
</body>