vue form表单数据提交

vue 专栏收录该内容
9 篇文章 3 订阅

利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,

再利用双向绑定得到值。下面写了传json格式跟formData格式的两种情况,根据实际参考

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="请输入昵称" v-model="formMess.account">
      <input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
      <input type="text" placeholder="请输入手机号" v-model="formMess.phone">
    </form>
    <span class="but" @click="onSubmit()">提交</span>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "from",
  data() {
    return {
    	formMess:{
	    "account":"",
	    "act_pwd":"",
	    "phone":""
	}
    };
  },
  methods: {
    onSubmit() {
      /* json格式提交: */
      // let formData = JSON.stringify(this.formMess);

      /* formData格式提交: */
      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }

        axios({
	    method:"post",
	    url:"xxxxxxx",
	    headers: {
		  "Content-Type": "multipart/form-data"
	    },
	    withCredentials:true,
	    data:formData
	}).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{
  form{
    width:90%;
    margin: auto;
    border:.01rem solid gray;
    display: flex;
    flex-wrap: wrap;
    input{
      width:80%;
      height:.5rem;
      margin-bottom: .2rem;
      border:.01rem solid black;
      height:.5rem;
    }
  }
  .but{
    font-size: .14rem;
    margin-left:5%;
  }
}
</style>

 

vue批量验证form表单数据:

https://blog.csdn.net/caimingxian401/article/details/97135133

 

喜欢可点赞/ 收藏/ 评论/ 打赏,有人回应才有动力继续更新哒!\‘▽′/

 

 

评论 6 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页

打赏作者

caicaicai404

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值