vue简单提交表单数据

最新推荐文章于 2024-06-25 15:53:03 发布

FOREVER-Q

最新推荐文章于 2024-06-25 15:53:03 发布

阅读量384

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62785037/article/details/125940525

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
   <form action="" @submit.prevent="box">
    账号:<input type="text" v-model="formSubmit.account">
    <br><br>
    密码:<input type="password"  v-model="formSubmit.passWord"><br><br>
   性别:<input type="radio" name="male" v-model="formSubmit.gender" value="male">男
    <input type="radio" name="female" v-model="formSubmit.gender" value="female">女
    <br><br>
    爱好:<input type="checkbox" v-model="formSubmit.love" value="js">Javascript
        <input type="checkbox" v-model="formSubmit.love" value="vue">Vue
        <input type="checkbox" v-model="formSubmit.love" value="react">React
    <br><br>
    所属校区:
    <select name="" id="" v-model="formSubmit.campus">
        <option >请选择校区</option>
        <option value="northCampus">北山校区</option>
        <option value="southCampus">南山校区</option>
    </select>
    <br><br>
    其它信息:
    <textarea v-model="formSubmit.text"></textarea>
    <br> <br>
    <input type="checkbox" v-model.lazy="formSubmit.read">阅读并接受<a href="#" style="text-decoration:none;">《用户协议》</a>
    <br> <br>
    <button>提交</button>
</form> 
</div>
<script>
    Vue.config.productionTip = false;
    const vm=new Vue({
        el:"#root",
        data() {
            return {
                formSubmit:{
                        account:"",
                        passWord:"",
                        gender:"",
                        love:[],
                        campus:[],
                        text:"",
                        read:""   
                }
            }
        },
        methods: {
            box(){
               console.log(this.formSubmit); 
            }
        },
    })
</script>
</body>
</html>