Vue简单学生信息录入页面

Vue是一个流行的JavaScript前端框架，它非常适合快速构建用户界面。创建一个简单的学生信息录入页面，我们可以按照以下步骤来进行：

1. **初始化项目**：使用Vue CLI工具（如`vue create`命令）初始化一个新的Vue项目。

npm install -g @vue/cli
vue create student-info-form

2. **创建组件**：在`src/components`目录下创建一个名为`StudentInfoForm.vue`的文件，用于存放表单结构。

<template>
  <div class="student-info-form">
    <h2>学生信息录入</h2>
    <form @submit.prevent="onSubmit">
      <label for="name">姓名：</label>
      <input type="text" v-model="name" id="name" required>

      <label for="age">年龄：</label>
      <input type="number" v-model="age" id="age" required>

      <label for="class">班级：</label>
      <select v-model="class" id="class">
        <option value="">请选择</option>
        <option v-for="item in classes" :value="item.value">{{ item.label }}</option>
      </select>

      <button type="submit">提交</button>
    </form>
    <p v-if="showMessage">提交成功，{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      class: '',
      classes: [
        { value: '01', label: '一班' },
        { value: '02', label: '二班' },
        // 添加更多选项...
      ],
      showMessage: false,
      message: ''
    };
  },
  methods: {
    onSubmit() {
      this.showMessage = true;
      this.message = '学生信息已提交';
      // 这里可以添加实际的数据保存逻辑，例如API调用或本地存储等
    }
  }
};
</script>

3. **在主组件引用并使用**：在`src/App.vue`中引入并显示这个学生信息录入表单。

<template>
  <div id="app">
    <StudentInfoForm />
  </div>
</template>

<script>
import StudentInfoForm from './components/StudentInfoForm.vue';

export default {
  components: {
    StudentInfoForm
  }
};
</script>