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
数组中的每个元素渲染到页面上。