vue 表单

<template>
  <div>
    <!-- 表单元素绑定 v-model 指令，实现双向数据绑定 -->
    <form @submit.prevent="onSubmit">
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>

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

      <div>
        <label for="message">留言:</label>
        <textarea id="message" v-model="formData.message"></textarea>
      </div>

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据对象
      formData: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    // 提交表单时触发的方法
    onSubmit() {
      console.log('表单数据:', this.formData);
      // 这里可以添加提交表单的逻辑，例如发送到服务器
    }
  }
};
</script>

<style scoped>
/* 添加一些简单的样式 */
div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 80px;
}

input, textarea {
  width: 200px;
}
</style>

解释说明：

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

   • 使用了 v-model 指令将表单元素（如输入框、文本区域）与组件的数据属性进行双向绑定。
   • @submit.prevent 用于阻止表单的默认提交行为，并调用 onSubmit 方法。

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

   • data 函数返回一个包含表单字段的对象 formData，这些字段会与表单元素绑定。
   • methods 中定义了 onSubmit 方法，在用户点击提交按钮时触发，打印表单数据到控制台。

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

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