如何使用PHP和Vue.js实现图表上的数据筛选和排序功能

query($sql); // 将查询结果转化为JSON格式返回给前端 $data = []; while ($row = $result->fetch_assoc()) { $data[] = $row; } echo json_encode($data); // 关闭数据库连接 $conn->close(); ?>

new Vue({ el: "#app", data: { students: [], filteredStudents: [] }, mounted() { // 发送ajax请求获取数据 axios.get("data.php").then(response => { this.students = response.data; this.filteredStudents = response.data; }); }, methods: { filterData() { // 根据选择的筛选条件，过滤数据并更新到filteredStudents }, sortData(fieldName, direction) { // 根据指定的字段和排序方向，对数据进行排序并更新到filteredStudents } } });

 全部年龄 18岁 19岁 20岁 21岁 22岁 

sortData(fieldName, direction) { this.filteredStudents.sort((a, b) => { return a[fieldName] > b[fieldName] ? 1 : -1; }); if (direction === "desc") { this.filteredStudents.reverse(); } }

 
 
{{ student.name }}
 
{{ student.age }}
 
{{ student.grade }}