vue自定义表单

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">姓名:</label>
        <input id="name" v-model="formData.name" type="text" />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input id="email" v-model="formData.email" type="email" />
      </div>
      <div>
        <label for="password">密码:</label>
        <input id="password" v-model="formData.password" type="password" />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      // 在这里处理表单提交逻辑
      console.log('提交的表单数据:', this.formData);
      // 可以在这里发送数据到服务器，或者执行其他操作
    }
  }
};
</script>

<style scoped>
/* 这里可以添加一些样式 */
</style>

解释说明

1. 模板部分 (<template>):

   • 创建了一个简单的表单，包含三个输入字段（姓名、邮箱和密码）和一个提交按钮。
   • 使用了 v-model 指令将输入字段与 Vue 组件的数据属性进行双向绑定。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数返回一个对象，其中包含表单数据 formData。
   • 定义了一个 methods 对象，其中包含 handleSubmit 方法，用于处理表单提交事件。当用户点击提交按钮时，会触发这个方法，并在控制台输出表单数据。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加一些样式来美化表单，scoped 属性确保这些样式只应用于当前组件。