前端面试题用UNIAPP设计一个表单: 包括编码id、姓名name、性别sex出生日期birthday、工作经历将上述数据打包成ison数组格式然后post提交给后台

泡芙小姨

于 2023-04-21 17:23:45 发布

阅读量426

点赞数

文章标签：前端 uni-app javascript

本文链接：https://blog.youkuaiyun.com/m0_70782896/article/details/130293562

版权

这是一个使用Vue.js编写的表单示例，包含id、姓名、性别、出生日期和工作经历字段，使用v-model绑定数据。用户输入后，点击提交按钮，数据被转换为JSON格式并通过POST方法发送到后台。

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

<template>
  <form>
    <label for="id">编码id:</label>
    <input type="text" id="id" v-model="id">
    <label for="name">姓名:</label>
    <input type="text" id="name" v-model="name">
    <label for="sex">性别:</label>
    <input type="text" id="sex" v-model="sex">
    <label for="birthday">出生日期:</label>
    <input type="text" id="birthday" v-model="birthday">
    <label for="workExperience">工作经历:</label>
    <input type="text" id="workExperience" v-model="workExperience">
    <button @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: '',
      sex: '',
      birthday: '',
      workExperience: ''
    }
  },
  methods: {
    submitForm() {
      const formData = {
        id: this.id,
        name: this.name,
        sex: this.sex,
        birthday: this.birthday,
        workExperience: this.workExperience
      }
      const jsonData = JSON.stringify(formData)
      // post请求提交jsonData给后台
      ${INSERT_HERE}
    }
  }
}
</script>