51.使用vue3+vite+typescript+element_plus的setup语法糖实现发送axios的get请求http://localhost:3000/users接口数据,将获取到的json数据显示在页面上
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
interface User {
id: number
name: string
}
const users = ref<User[]>([])
onMounted(async () => {
try {
const response = await axios.get('http://localhost:3000/users')
users.value = response.data
} catch (error) {
console.error(error)
}
})
</script>
在这个例子中,我们使用了 ref 来创建一个响应式的 users 变量。在 onMounted 钩子函数中,我们使用 axios 发送了一个 GET 请求到 http://localhost:3000/users 接口,并将获取到的数据赋值给 users 变量。
最后,我们使用 v-for 指令将 users 数组中的每个元素渲染到页面上。

浙公网安备 33010602011771号