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 已经是排序后的数组。

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

排序效果

相关推荐
前端熊猫12 小时前
jQuery AJAX、Axios与Fetch
ajax·okhttp·jquery
北上ing13 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
沉迷...14 小时前
详解.vscode 下的json .vscode文件夹下各个文件的作用
ide·vscode·json
Jet_closer_burning18 小时前
axios封装
前端·javascript·vue.js·react.js·ajax
聪明的墨菲特i20 小时前
SQL进阶知识:九、高级数据类型
xml·数据库·sql·mysql·json·空间数据类型
AAA顶置摸鱼1 天前
使用 Pandas 进行多格式数据整合:从 Excel、JSON 到 HTML 的处理实战
json·excel·pandas
冰^1 天前
MySQL VS SQL Server:优缺点全解析
数据库·数据仓库·redis·sql·mysql·json·数据库开发
Jamesvalley1 天前
【修复】Django收到请求报Json解析错误
django·json
异常君2 天前
Java 序列化工具:@JSONField 注解实战解析与应用技巧
java·后端·json
程序员沉梦听雨2 天前
OkHttp入门
okhttp