vue3使用api接口获取多条数据
时间: 2023-12-06 12:42:36 浏览: 87
在 Vue3 中使用 API 接口获取多条数据,可以使用 `axios` 库来发送 HTTP 请求并获取数据。
首先,需要在项目中安装 `axios` 库:
```bash
npm install axios --save
```
然后,在组件中引入 `axios` 并发送请求:
```javascript
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: []
};
},
mounted() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.items = response.data;
})
.catch(error => {
console.log(error);
});
}
};
</script>
```
在上面的代码中,首先引入 `axios` 库,然后在 `mounted` 钩子中发送 GET 请求获取数据。在成功获取数据后,将数据保存到 `items` 数组中,然后在模板中使用 `v-for` 循环渲染数据。
注意:上面的代码中使用了一个公共的测试 API 接口 `https://jsonplaceholder.typicode.com/posts`,实际开发中需要根据自己的接口地址进行修改。
阅读全文