vue3 datav 获取后台接口数据
时间: 2024-06-13 12:07:47 浏览: 10
为了在Vue3 DataV中获取后台接口数据,可以使用axios库来进行异步请求。以下是一个简单的例子:
```vue
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>
<div v-for="item in data" :key="item.id">{{ item.name }}</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
loading: true,
data: [],
};
},
mounted() {
axios.get('/api/data').then((response) => {
this.loading = false;
this.data = response.data;
}).catch((error) => {
console.log(error);
});
},
};
</script>
```
在这个例子中,我们使用了axios库来进行异步请求。在组件的mounted钩子函数中,我们使用axios.get方法来获取后台接口数据。在获取数据成功后,我们将loading状态设置为false,并将数据赋值给组件的data属性。最后,在模板中,我们使用v-if和v-else指令来根据loading状态来显示不同的内容。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)