在 Vue 中页面加载数据时展示 Loading 动画效果

Vue 8月前 633

在前端开发中，页面加载数据时，用户需要等待一段时间，而这段时间可能会让用户感到不耐烦。为了提高用户体验，我们可以在页面加载数据时展示 Loading 动画效果，让用户知道数据正在加载中，同时也为了让用户有耐心等待数据的加载。

Vue 是一款非常流行的前端框架，它提供了很多实用的功能，其中包括页面加载数据时展示 Loading 动画效果。在本文中，我们将介绍如何使用 Vue 实现这个功能。

实现思路

我们可以使用 Vue 的生命周期钩子函数来实现页面加载数据时展示 Loading 动画效果。具体来说，我们可以在 mounted 钩子函数中展示 Loading 动画，在数据加载完成后再隐藏 Loading 动画。

举例说明

下面是一个使用 Vue 实现 Loading 动画的例子。在这个例子中，我们使用了 Axios 来获取数据，同时使用了 Element UI 的 Loading 组件来展示 Loading 动画。

首先，在 Vue 实例中定义一个 isLoading 变量，用来表示是否正在加载数据。然后，在 mounted 钩子函数中展示 Loading 动画，同时使用 Axios 获取数据。在数据加载完成后，隐藏 Loading 动画，同时将获取到的数据存储在 data 变量中。

<template>
  <div>
    <el-loading :visible="isLoading"></el-loading>
    <div v-if="!isLoading">
      <!-- 展示获取到的数据 -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      isLoading: true,
      data: null,
    };
  },
  mounted() {
    this.isLoading = true;
    axios.get('http://example.com/data')
      .then(response => {
        this.isLoading = false;
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
        this.isLoading = false;
      });
  },
};
</script>

在上面的例子中，我们使用了 Element UI 的 Loading 组件来展示 Loading 动画。在 mounted 钩子函数中，我们使用 Axios 发送 GET 请求来获取数据。在数据加载完成后，我们将 isLoading 变量设置为 false，同时将获取到的数据存储在 data 变量中。