vue项目表单录入界面代码

以下是一个简单的 Vue 表单录入界面代码示例：

<template>
  <div>
    <h2>录入信息</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="name" required>
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model.number="age" required>
      </div>
      <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" v-model="email" required>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: null,
      email: ''
    };
  },
  methods: {
    submitForm() {
      // 在这里处理表单提交逻辑
      console.log(this.name, this.age, this.email);
      // 清空表单
      this.name = '';
      this.age = null;
      this.email = '';
    }
  }
};
</script>

该示例展示了一个简单的表单录入界面，包括姓名、年龄和邮箱三个输入框。通过 `v-model` 指令将输入框的值绑定到组件实例的数据属性中。在 `submitForm` 方法中处理表单提交逻辑，可以在控制台输出表单数据，同时清空输入框。