vue3 ajax获取json数组排序举例

使用axios获取接口数据

可以在代码中安装axios包,并写入到package.json文件:

npm install axios -S

接口调用代码举例如下:

const fetchScore = async () => {try {const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);if (res.status !== 200) return;data.value = res.data;} catch (error) {console.log(error);};         
}

后台代码如下:

@app.get("/score/{count}")
def get_score(count: int):if count <= 0: return {}result = []for i in range(count):result.append({"number": i+1, "score": random.uniform(0.0, 100.0)})return result 

数据获取效果如下:
获取20个数据

json数组进行排序

Vue 3 中对数据进行排序,可以通过在组件的 setup 函数中定义一个计算属性或方法来实现。

1. 使用计算属性排序

<script setup>
import AppLayout from '../components/AppLayout.vue';
import axios from 'axios';
import { ref, computed } from 'vue';const data = ref([]);
const userInput = ref('')const sortedData = computed(() => {return data.value.slice().sort((a, b) => b.score - a.score);
});const fetchScore = async () => {try {const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);if (res.status !== 200) return;data.value = res.data;} catch (error) {console.log(error);};         
}
</script><template><AppLayout><h1>Score</h1><div><label for="user-input">Enter a number:</label><input id="user-input" v-model.number="userInput" type="number" placeholder="Type a number..."></div> <button @click="fetchScore">Fetch Score</button>     <p v-if = "data.length > 0">Score list:</p><ul v-if="data.length > 0"><li v-for="item in data" :key="item.number">{{ item.number + ": " + item.score }}</li></ul><p v-if="sortedData.length > 0">Sorted Score list:</p><ul v-if="sortedData.length > 0"><li v-for="item in sortedData" :key="item.number">{{ item.number + ": " + item.score }}</li></ul></AppLayout>
</template>

2. 直接修改ajax方法所获得的数据

以上述代码为例,可以在 fetchScore 方法中对数据进行排序后再赋值给 data
代码示例如下:

<script setup>
import AppLayout from '../components/AppLayout.vue';
import axios from 'axios';
import { ref } from 'vue';const data = ref([]);const fetchScore = async () => {try {const res = await axios.get(`http://127.0.0.1:8000/score/${userInput.value}`);if (res.status !== 200) return;data.value = res.data.sort((a, b) => a.score - b.score);} catch (error) {console.log(error);}
}
</script><template><AppLayout><h1>Score</h1><button @click="fetchScore">Fetch Score</button><p v-if="data.length > 0">Sorted score list:</p><ul v-if="data.length > 0"><li v-for="item in data" :key="item.number">{{ item.number + ": " + item.score }}</li></ul></AppLayout>
</template>

3. 方法比较

  • 计算属性:

sortedData 是一个计算属性,它返回 data 数组的一个排序副本。使用 slice() 方法是为了避免直接修改原始数组。
在模板中使用 sortedData 而不是 data,这样每次 data 变化时,sortedData 都会自动重新计算。

  • 直接修改方法:

fetchScore 方法中,获取数据后直接对其进行排序,并将排序后的结果赋值给 data
在模板中直接使用 data,因为 data 已经是排序后的数组。
选择哪种方式取决于你的具体需求和偏好。计算属性适用于需要多次使用的排序逻辑,而方法适用于一次性排序。

排序效果

排序效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

How to use the ‘git log‘ command to get change log for each file?

1. Using git log command #!/bin/bash# 目标文件名 output_file"git_log.csv"# 打印 CSV 文件的标题行 echo "CommitID,Author,Author Email,Date,Added-Lines Removed-Lines File" > $output_file echo "CommitID,Author,Author Email,Date,Add…

Vue前端开发-动态插槽

不仅父组件可以通过插槽方式访问并控制子组件传入的数据&#xff0c;而且可以控制传入父组件时插槽的名称&#xff0c;从而使不同的插槽根据名称的不同&#xff0c;使用场景也不同&#xff0c;例如在一个小区详细页中&#xff0c;可以根据小区类型&#xff0c;调用不同名称的详…

SqlServer强制转换函数TRY_CONVERT和TRY_CAST

SqlServer强制转换函数TRY_CONVERT和TRY_CAST的介绍和案例分享 1、本节内容 CAST 和 CONVERT TRY_CAST TRY_CONVERT 适用于&#xff1a; SQL ServerAzure SQL 数据库Azure SQL 托管实例Azure Synapse Analytics 分析平台系统 (PDW)Microsoft Fabric 中的 SQL 分析端点Micro…

PaddleOCR:一款高性能的OCR工具介绍

一、引言 随着人工智能技术的不断发展&#xff0c;光学字符识别&#xff08;OCR&#xff09;技术在各行各业得到了广泛应用。OCR技术能够将图片、扫描件等非结构化数据中的文字信息提取出来&#xff0c;转换为可编辑的文本格式。在我国&#xff0c;百度开源了一款优秀的OCR工具…

如果在docker 容器中安装ros遇到的问题

1.在容器内部无法修改时间&#xff0c;需要在宿主机外边修改时钟。修改时钟&#xff1a; hwclock --systohc或者执行 date -s "2024-11-24 19:25:10"2.容器内部内置有opencv4.5版本&#xff0c;需要卸载&#xff0c;重新安装4.2.0版本。记录折腾好久的卸载过程。 …

LLM*:路径规划的大型语言模型增强增量启发式搜索

路径规划是机器人技术和自主导航中的一个基本科学问题&#xff0c;需要从起点到目的地推导出有效的路线&#xff0c;同时避开障碍物。A* 及其变体等传统算法能够确保路径有效性&#xff0c;但随着状态空间的增长&#xff0c;计算和内存效率会严重降低。相反&#xff0c;大型语言…

ACL的原理与配置

ACL技术概述 ACL&#xff1b;访问控制列表 技术背景&#xff1a; 园区重要服务器资源被随意访问&#xff0c;容易泄露机密&#xff0c;造成安全隐患 病毒侵入内网&#xff0c;安全性降低 网络宽带被各类业务随意挤占&#xff0c;服务质量要求高的宽带得不到保障&#xff0…

Qt中QGraphics绘图类相关解释

Item(图元)坐标系、Scene(场景)坐标系、View(视图)坐标系&#xff0c;三者均为&#xff1a;x轴正方向向右&#xff0c;y轴正方向向下 1、Item(图元)&#xff1a;坐标属于局部坐标&#xff0c;通常以图元中心为原点(中心对称)。 场景坐标系统描述了顶层的图元&#xff0c;每个图…

【配置】pycharm运行的项目如何修改名称(项目名称、模块名称)

当我们需要修改项目名称、模块名称的时候&#xff0c;能够在网上找一些修改的方法&#xff0c;但是有没有很保守但很使用的方法可以解决这个问题呢&#xff1f; 创建项目 通过pycharm创建一个django的项目 创建之后的项目目录&#xff1a; 更改项目名称&#xff1a; 往往以…

【新人系列】Python 入门(十四):文件操作

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12801353.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Python 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…

MySQL 启动失败问题分析与解决方案:`mysqld.service failed to run ‘start-pre‘ task`

目录 前言1. 问题背景2. 错误分析2.1 错误信息详解2.2 可能原因 3. 问题排查与解决方案3.1 检查 MySQL 错误日志3.2 验证 MySQL 配置文件3.3 检查文件和目录权限3.4 手动启动 MySQL 服务3.5 修复 systemd 配置文件3.6 验证依赖环境 4. 进一步优化与自动化处理结语 前言 在日常…

IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“

参考文章&#xff1a;https://blog.csdn.net/yueeryuanyi/article/details/14211090 问题&#xff1a;IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“编译都没问题 解决思路 – >【清除缓存】 1. 强制刷新Maven缓存 选择 Maven 标签&#xff0c;Exe…

git仓库:循环所有提交、查找有无指定文件名

util–bash-simplify/git/git_loopCommit_findFind.sh #!/bin/bash#【描述】 git仓库&#xff1a;循环所有提交、查找有无指定文件名 #【依赖】 #【术语】 #【备注】 #【用法举例】 # bash /app/bash-simplify/git/git_loopCommit_findFind.sh /app5/android-prj-h…

android bindService打开失败

在写demo验证SurfaceControlViewHost的时候&#xff0c;bindService提示 Unable to start service Intent U0: not found 在源代码里搜了下&#xff0c;找到是在如下方法里面里面打印出来的 // frameworks/base/services/core/java/com/android/server/am/ActiveServices.java…

通过 SSH 进行WordPress网站的高级服务器管理

我在管理hostease的服务器时&#xff0c;时常需要通过SSH登录服务器进行修改。而在网站管理中&#xff0c;SSH不仅是一个基础工具&#xff0c;更是高级用户用来精细化管理和优化服务器的重要工具。通过SSH&#xff0c;你可以深入监控服务器的性能、精细管理系统资源&#xff0c…

分布式搜索引擎之elasticsearch单机部署与测试

分布式搜索引擎之elasticsearch单机部署与测试 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的…

WPF+MVVM案例实战与特效(三十)- 封装一个系统日志显示控件

文章目录 1、运行效果2、日志控件封装1、文件创建2、DisplayLogPanel.xaml 代码3、using System;3、using System;3、数据模型4、枚举类型3、案例实现1、LogPanelWindow.xaml2、LogPanelViewModel.cs4、总结1、运行效果 2、日志控件封装 1、文件创建 打开 Wpf_Examples ,在 …

C++算法练习-day47——450.删除二叉搜索树中的节点

题目来源&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目思路分析 题目要求在给定的二叉搜索树中删除一个具有指定值的节点&#xff0c;并返回删除后的二叉搜索树的根节点。二叉搜索树的性质是&#xff0c;对于树中的每个节点&#xff0c;其左子树中的所有节点的…

第二节——计算机网络(四)物理层

车载以太网采用差分双绞线车载以太网并未指定特定的连接器&#xff0c;连接方式更为灵活小巧&#xff0c;能够大大减轻线束重量。传统以太网一般使用RJ45连接器连接。车载以太网物理层需满足车载环境下更为严格的EMC要求&#xff0c;100BASE-T1\1000BASE-T1对于非屏蔽双绞线的传…

使用vcpkg自动链接tinyxml2时莫名链接其他库(例如boost)

使用vcpkg自动链接tinyxml2时莫名链接其他库&#xff08;例如boost&#xff09; vcpkg的自动链接功能非常方便&#xff0c;但在某些情况下会出现过度链接的问题。 链接错误症状 以tinyxml2为例&#xff0c;程序中调用tinyxml2的函数后&#xff0c;若vcpkg中同时存在opencv和…