如何使用PHP和Vue实现数据筛选功能

<div id="app">
  <form>
    <label>姓名:</label>
    <input type="text" v-model="filter.name">
    <br>
    <label>年龄:</label>
    <input type="number" v-model.number="filter.age">
    <br>
    <label>成绩:</label>
    <input type="number" v-model.number="filter.score">
    <br>
    <button type="button" @click="filterStudents">筛选</button>
  </form>
  
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
    <tr v-for="student in filteredStudents">
      <td>{{ student.name }}</td>
      <td>{{ student.age }}</td>
      <td>{{ student.score }}</td>
    </tr>
  </table>
</div>

new Vue({
  el: '#app',
  data: {
    students: [], // 学生信息数组
    filter: { // 筛选条件
      name: '',
      age: null,
      score: null
    }
  },
  computed: {
    filteredStudents() { // 根据筛选条件过滤学生信息
      return this.students.filter(student => {
        let nameMatch = student.name.toLowerCase().includes(this.filter.name.toLowerCase());
        let ageMatch = this.filter.age ? student.age === parseInt(this.filter.age) : true;
        let scoreMatch = this.filter.score ? student.score === parseFloat(this.filter.score) : true;
        return nameMatch && ageMatch && scoreMatch;
      });
    }
  },
  methods: {
    filterStudents() { // 筛选学生信息
      // 发送Ajax请求获取学生信息，这里假设数据已经存在
      axios.get('/api/students')
        .then(response => {
          this.students = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  mounted() { // 初始化时获取学生信息
    this.filterStudents();
  }
});

<?php

// 假设我们已有学生信息的数组
$students = [
  ['name' => '张三', 'age' => 18, 'score' => 90],
  ['name' => '李四', 'age' => 20, 'score' => 85],
  ['name' => '王五', 'age' => 19, 'score' => 95]
];

// 处理Ajax请求
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $_SERVER['REQUEST_URI'] === '/api/students') {
  header('Content-Type: application/json');
  echo json_encode($students);
  exit;
}

?>