vue form

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="form.name" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="form.email" required />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      // Handle form submission logic here
      console.log('Form submitted:', this.form);
      // You can add code to send the form data to a server or perform other actions
    }
  }
};
</script>

<style scoped>
/* Add some basic styling */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  font-weight: bold;
}

input {
  padding: 5px;
}

button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 使用了一个简单的表单，包含两个输入字段（name 和 email）和一个提交按钮。
  • @submit.prevent="handleSubmit" 阻止了表单的默认提交行为，并调用了 handleSubmit 方法。

• 脚本部分 (<script>):

  • 定义了一个 data 函数返回一个对象，其中包含 form 对象，用于存储表单数据。
  • handleSubmit 方法在表单提交时被调用，当前只是简单地将表单数据打印到控制台。你可以根据需要扩展此方法以处理表单提交逻辑，例如发送数据到服务器。

• 样式部分 (<style scoped>):

  • 添加了一些基本的样式，使表单看起来更美观。scoped 属性确保这些样式只应用于当前组件。