在vue项目中,点击一个按钮发起请求,并且点击按钮控制一个区域的显示和隐藏,同时保持数据拿到之后一起与该区域显示出来,同时按钮保持转圈的状态,区域显示了,停止转圈的状态

你可以按照以下步骤来实现：

1. 在 Vue 组件中定义一个变量 `showArea` 来控制该区域的显示和隐藏。

2. 在按钮上绑定 `click` 事件，并且在方法中发起请求。同时，在发起请求之前，设置按钮的状态为转圈。

3. 当请求成功后，将数据保存到组件的数据中，并且将 `showArea` 变量设置为 `true`，这样就可以让对应的区域显示出来。

4. 在数据请求完成后，将按钮的状态改为正常状态，停止转圈。

下面是示例代码：

<template>
  <div>
    <button @click="getData" :disabled="loading">
      <i v-if="loading" class="fa fa-spinner fa-spin"></i>
      点击获取数据
    </button>
    <div v-show="showArea">
      <!-- 显示数据 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showArea: false,
      loading: false, // 按钮状态
      data: null // 数据
    }
  },
  methods: {
    getData() {
      this.loading = true;
      // 发起请求
      axios.get('/api/data')
        .then((response) => {
          this.data = response.data;
          this.showArea = true; // 显示区域
        })
        .finally(() => {
          this.loading = false; // 停止转圈
        });
    }
  }
}
</script>