写一个vueget请求加载动画代码
时间: 2024-04-29 08:23:45 浏览: 22
以下是一个简单的Vue组件代码,用于发出GET请求并在加载过程中显示动画:
```
<template>
<div>
<button @click="loadData">Load Data</button>
<div v-if="loading" class="loading">Loading...</div>
<ul>
<li v-for="item in data" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
data: [],
loading: false,
};
},
methods: {
loadData() {
this.loading = true;
axios.get('https://jsonplaceholder.typicode.com/todos')
.then((response) => {
this.data = response.data;
this.loading = false;
})
.catch((error) => {
console.log(error);
this.loading = false;
});
},
},
};
</script>
<style>
.loading {
font-size: 1.2rem;
font-weight: bold;
color: blue;
}
</style>
```
在上面的代码中,当用户点击“Load Data”按钮时,`loadData()`方法将被调用。在这个方法中,我们将`loading`变量设为`true`,并使用`axios`库发出GET请求。在请求成功或失败后,我们将显示的数据存储在`data`变量中,并将`loading`变量设为`false`,以隐藏加载动画。在HTML模板中,我们使用`v-if`指令根据`loading`变量的值来显示或隐藏加载动画。
相关推荐
![](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)
![](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)