vue axios局部加载loading

Vue.js 中使用 Axios 进行局部加载（即 loading 状态）通常是在异步数据请求过程中显示一个加载指示器，让用户知道操作正在进行中。这可以通过以下几个步骤实现：

1. 定义一个 Vue 组件内的状态变量，比如 `loading`，初始值设为 `false`，表示默认无加载状态。

data() {
  return {
    loading: false,
    items: [],
  };
},

2. 当需要发起请求时，在组件的方法中设置 `loading` 为 `true`，显示加载效果，例如：

methods: {
  fetchData() {
    this.loading = true;
    axios.get('your-api-url')
      .then(response => {
        this.items = response.data;
        this.loading = false; // 请求成功后，将 loading 设置回 false
      })
      .catch(error => {
        console.error(error);
        this.loading = false; // 或者处理错误后恢复到非加载状态
      });
  },
}

3. 在模板中使用 v-if 指令展示一个加载提示，如使用 Vue-Loading-Circle 图标库：

<template>
  <div>
    <v-loading :active="loading" color="primary"></v-loading>
    <ul v-if="!loading">
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

4. 当调用 `fetchData()` 方法时，页面会显示加载状态，等到数据加载完成并更新 `items` 数组后，加载指示器会隐藏。