axios请求后的Vue.js: v-bind:类

<template>
  <div>
    <button @click="getData">获取数据</button>
    <div :class="{'loading': isLoading, 'success': isSuccess, 'error': isError}">
      数据内容
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      isLoading: false,
      isSuccess: false,
      isError: false
    };
  },
  methods: {
    getData() {
      this.isLoading = true;
      axios.get('/api/data')
        .then(response => {
          this.isLoading = false;
          this.isSuccess = true;
          // 处理数据
        })
        .catch(error => {
          this.isLoading = false;
          this.isError = true;
          // 处理错误
        });
    }
  }
};
</script>

<style>
.loading {
  /* 加载样式 */
}

.success {
  /* 成功样式 */
}

.error {
  /* 错误样式 */
}
</style>