vue生命周期加载中怎么出来
时间: 2023-07-02 13:18:04 浏览: 91
Vue 的生命周期钩子函数可以帮助我们在组件不同的阶段执行不同的操作,从而更好地控制应用程序的行为。如果想在组件加载过程中显示加载中的状态,可以使用 `created` 和 `mounted` 钩子函数。
在 `created` 钩子函数中,可以设置一个 `loading` 变量来表示当前组件是否在加载中的状态,然后在 `mounted` 钩子函数中,当数据加载完成后,将 `loading` 变量设为 `false`,从而实现加载中状态的显示和隐藏。具体实现代码如下:
```
<template>
<div>
<div v-if="loading">加载中...</div>
<div v-else>加载完成</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
data: null
}
},
created() {
// 设置 loading 变量为 true,表示组件正在加载中
this.loading = true;
// 发送数据请求
axios.get('/api/data')
.then(res => {
// 数据请求完成后,将 loading 变量设为 false,表示组件加载完成
this.loading = false;
this.data = res.data;
})
}
}
</script>
```