vue3 ajax获取json数组排序举例

使用axios获取接口数据

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

bash 复制代码
npm install axios -S

接口调用代码举例如下:

javascript 复制代码
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);
    };         
}

后台代码如下:

python 复制代码
@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 

数据获取效果如下:

json数组进行排序

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

1. 使用计算属性排序

javascript 复制代码
<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

代码示例如下:

javascript 复制代码
<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 已经是排序后的数组。

选择哪种方式取决于你的具体需求和偏好。计算属性适用于需要多次使用的排序逻辑,而方法适用于一次性排序。

排序效果

相关推荐
一瓣橙子9 小时前
7.7日 实验03-Spark批处理开发(2)
开发语言·javascript·ajax
爱喝水的小周16 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
百锦再1 天前
.Net配置文件appsetting.json的几种读取方法
chrome·json·.net·依赖注入·appsetting·web.config
The_cute_cat2 天前
Ajax和Axios的初步学习
前端·学习·ajax
葬歌倾城3 天前
JSON的缩进格式方式和紧凑格式方式
c#·json
火车叨位去19494 天前
Java中的JSON序列化和反序列化
json
测试杂货铺4 天前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json
专注VB编程开发20年4 天前
C#,VB.NET从JSON数据里提取数组中的对象节点值
c#·json·.net
草履虫建模5 天前
Postman - API 调试与开发工具 - 标准使用流程
java·测试工具·spring·json·测试用例·postman·集成学习
旷世奇才李先生5 天前
AJAX 安装使用教程
前端·javascript·ajax