软件工程日报12

今天简单了解了vue的简单内容知识，完成了简单的学生成绩管理界面
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生成绩管理系统</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>学生成绩管理系统</h1>
    <!-- 添加学生 -->
    <div>
      <label for="name">姓名: </label>
      <input type="text" id="name" v-model="newStudent.name" placeholder="请输入姓名">
      <label for="score">分数: </label>
      <input type="number" id="score" v-model="newStudent.score" placeholder="请输入分数">
      <button @click="addStudent">添加</button>
    </div>
    <!-- 搜索功能 -->
    <div>
      <label for="search">搜索: </label>
      <input type="text" id="search" v-model="searchKeyword" placeholder="请输入关键词">
    </div>
    <!-- 过滤功能 -->
    <div>
      <input type="checkbox" id="passOnly" v-model="showPassOnly">
      <label for="passOnly">仅显示及格</label>
      <label for="minScore">最低分数: </label>
      <input type="number" id="minScore" v-model="minScore" placeholder="最低分数">
      <label for="maxScore">最高分数: </label>
      <input type="number" id="maxScore" v-model="maxScore" placeholder="最高分数">
    </div>
    <!-- 学生列表 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>分数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="filteredStudents.length === 0">
          <td colspan="3">暂无学生数据</td>
        </tr>
        <tr v-for="(student, index) in filteredStudents" :key="index">
          <td>{{ student.name }}</td>
          <td :style="{ color: student.score < 60 ? 'red' : 'black' }" @dblclick="editScore(student)">
            <span v-if="!student.isEditing">{{ student.score }}</span>
            <input v-else v-model="student.score" @keyup.enter="saveScore(student)" @blur="saveScore(student)">
          </td>
          <td>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
  <script>
    const { createApp, ref, watch } = Vue;

    const app = createApp({
      setup() {
        // 学生列表
        const students = ref([
          { name: '张三', score: 80 },
          { name: '李四', score: 50 }
        ]);

        // 新学生对象
        const newStudent = ref({ name: '', score: 0 });

        // 搜索关键词
        const searchKeyword = ref('');

        // 仅显示及格
        const showPassOnly = ref(false);

        // 分数范围过滤
        const minScore = ref('');
        const maxScore = ref('');

        // 过滤后的学生列表
        const filteredStudents = ref([]);

        // 添加学生
        const addStudent = () => {
          if (newStudent.value.name && newStudent.value.score) {
            students.value.push({ ...newStudent.value });
            newStudent.value.name = '';
            newStudent.value.score = 0;
          }
        };

        // 删除学生
        const deleteStudent = (index) => {
          students.value.splice(index, 1);
        };

        // 编辑分数
        const editScore = (student) => {
          student.isEditing = true;
        };

        // 保存分数
        const saveScore = (student) => {
          student.isEditing = false;
        };

        // 计算过滤后的学生列表
        const updateFilteredStudents = () => {
          let filtered = students.value;

          // 搜索过滤
          if (searchKeyword.value) {
            filtered = filtered.filter(student => student.name.includes(searchKeyword.value));
          }

          // 及格过滤
          if (showPassOnly.value) {
            filtered = filtered.filter(student => student.score >= 60);
          }

          // 分数范围过滤
          if (minScore.value) {
            filtered = filtered.filter(student => student.score >= parseInt(minScore.value));
          }
          if (maxScore.value) {
            filtered = filtered.filter(student => student.score <= parseInt(maxScore.value));
          }

          filteredStudents.value = filtered;
        };

        // 监听数据变化，更新过滤后的学生列表
        watch([students, searchKeyword, showPassOnly, minScore, maxScore], () => {
          updateFilteredStudents();
        });

        // 初始化过滤后的学生列表
        updateFilteredStudents();

        return {
          newStudent,
          searchKeyword,
          showPassOnly,
          minScore,
          maxScore,
          filteredStudents,
          addStudent,
          deleteStudent,
          editScore,
          saveScore
        };
      }
    });

    app.mount('#app');
  </script>
</body>

</html>
posted @ 2025-03-18 21:27 Look_Back 阅读(8) 评论(0) 收藏举报
刷新页面返回顶部
wjhfree

软件工程日报12

公告
