vue单文件中异步通信时显示loading

在Vue单文件组件中，当进行异步通信（如发送HTTP请求）时，通常会展示一个loading状态来提示用户操作正在进行中。下面是一个基本的步骤：

1. 首先，在模板中添加一个用于显示loading状态的元素，比如一个loading图标或者文本：

<template>
  <div>
    <v-loading v-if="isLoading" :active="isLoading"> <!-- 使用Vuetify的Loading组件 -->
      <span slot="text">加载中...</span>
    </v-loading>
    <div v-if="!isLoading">
      <!-- 你的内容将在这里动态加载 -->
      <p>{{ message }}</p>
    </div>
  </div>
</template>

2. 在数据对象（data）中声明一个布尔型变量，用于标记是否加载中状态：

export default {
  data() {
    return {
      isLoading: true, // 初始状态为加载中
      message: null,
    };
  },
};

3. 在methods中编写异步函数（例如axios请求），并在其中改变isLoading的状态：

methods: {
  async fetchData() {
    try {
      this.isLoading = true; // 开始加载
      const response = await axios.get('your-api-url');
      this.message = response.data; // 保存数据
      this.isLoading = false; // 加载完成
    } catch (error) {
      console.error('Error:', error);
      // 更新错误信息或提示
    }
  },
},
// 然后在某个适当的地方触发这个方法，比如按钮点击事件：
 mounted() {
   this.fetchData();
 },

这样，当用户触发数据请求时，loading状态会被显示出来；而在数据加载完毕后，它会被隐藏，并显示实际的数据。