vue 写表单

<template>
  <div>
    <!-- 表单元素 -->
    <form @submit.prevent="onSubmit">
      <!-- 输入框 -->
      <label for="name">姓名:</label>
      <input type="text" id="name" v-model="formData.name" required />

      <label for="email">邮箱:</label>
      <input type="email" id="email" v-model="formData.email" required />

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>

    <!-- 显示表单数据 -->
    <div v-if="submittedData">
      <h3>提交的数据:</h3>
      <p>姓名: {{ submittedData.name }}</p>
      <p>邮箱: {{ submittedData.email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据对象
      formData: {
        name: '',
        email: ''
      },
      // 提交后的数据对象
      submittedData: null
    };
  },
  methods: {
    // 提交表单时触发的方法
    onSubmit() {
      // 将表单数据复制到提交后的数据对象中
      this.submittedData = { ...this.formData };

      // 清空表单
      this.formData.name = '';
      this.formData.email = '';

      // 这里可以添加更多逻辑，例如发送数据到服务器
    }
  }
};
</script>

<style scoped>
/* 简单样式 */
form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
}

button {
  padding: 5px 10px;
}
</style>

解释说明：

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

   • 使用了标准的 HTML 表单元素，并通过 v-model 指令将输入框与 Vue 组件中的数据进行双向绑定。
   • 表单的提交事件被拦截并绑定到了 onSubmit 方法上（通过 @submit.prevent）。
   • 提交后，显示用户提交的数据。

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

   • 定义了一个 data 函数，返回一个包含表单数据和提交后数据的对象。
   • onSubmit 方法在表单提交时被调用，它会将当前表单数据复制到 submittedData 中，并清空表单。

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

   • 添加了一些简单的样式来美化表单。

这个示例展示了如何使用 Vue.js 创建一个简单的表单，并处理表单提交。