vue的form表单提交_axios提交表单

vue的form表单提交_axios提交表单利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,再利用双向绑定得到值。下面写了传json格式跟formData格式的两种情况,根据实际参考<template><divclass=”from_box”><formaction=””><inputty……

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

利用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表单数据:

vue批量验证form表单数据_caicaicai404的博客-CSDN博客

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184881.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vs 2010 专业版 密钥「建议收藏」

    vs 2010 专业版 密钥「建议收藏」YCFHQ-9DWCY-DKV88-T2TMH-G7BHP转载于:https://www.cnblogs.com/daretodream/archive/2013/04/02/2995147.html

  • PAT乙级考后杂谈

    PAT乙级考后杂谈上周末去隔壁大学参加了PAT乙级的考试,结果没想到第一次考试就出了点小问题…本来考试是在1.30全国各个考点都同时开始(因为要排名),结果快到1.30的时候机房连不上网络,最后我们这个考点直接移后到将近2.30才开始考试,虽然结束时间也移后了,不过这多年不遇的突发情况直接让我遇到也太真实了。。。小插曲过后,再说下考试内容,乙级确实难度不大,三小时五道题,前两道题基本是送分题,虽然作者本人比较菜…

  • 动漫常用网站/APP 彻底帮你解决看动漫的烦恼[通俗易懂]

    动漫常用网站/APP 彻底帮你解决看动漫的烦恼[通俗易懂]本文是众多使用技巧中其中的一篇,全部使用技巧点击链接查看,保证你收获满满我主页中的思维导图中内容大多从我的笔记中整理而来,相应技巧可在笔记中查找原题,有兴趣的可以去我的主页了解更多计算机学科的精品思维导图整理本文可以转载,但请注明来处,觉得整理的不错的小伙伴可以点赞关注支持一下哦!本文提到的所有软件和工具,可关注公众号一起学计算机点击资源获取获得本人最常用的网站就是AGE动漫,这是我用过最好的动漫网站,资源算是最全的吧,并且大多数动漫都提供百度云链接,可下载观看,…

  • cocos 3.0 一键打包android平台应该注意的细节

    cocos 3.0 一键打包android平台应该注意的细节

    2021年11月17日
  • 用js来实现那些数据结构15(图01)[通俗易懂]

    其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入。而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等。这是我们要介绍的最后一个数据结构。同时也是本系

  • 比较文本相似度_比较文本差异的工具

    比较文本相似度_比较文本差异的工具from:https://cloud.tencent.com/developer/news/218062本文作者为YvesPeirsman,是NLP领域的专家。在这篇博文中,作者比较了各种计算句子相似度的方法,并了解它们是如何操作的。词嵌入(wordembeddings)已经在自然语言处理领域广泛使用,它可以让我们轻易地计算两个词语之间的语义相似性,或者找出与目标词语最相似的词语。然而…

    2022年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号