vben页面loading在数据加载完毕结束loading
时间: 2024-03-21 19:14:44 浏览: 19
可以在数据加载完成后,通过代码来隐藏 loading。具体实现方式取决于你使用的框架或库。以下是一些实现示例:
1. 在 Vue.js 中,可以使用 v-if 指令来控制 loading 显示与隐藏:
```html
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>
<!-- 数据加载完成后显示的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true
}
},
mounted() {
// 模拟数据加载
setTimeout(() => {
this.loading = false
}, 2000)
}
}
</script>
```
2. 在 React 中,可以通过 state 控制 loading 的显示与隐藏:
```jsx
import React, { useState, useEffect } from 'react';
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
// 模拟数据加载
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div>
{loading ? 'Loading...' : <div>数据加载完成后显示的内容</div>}
</div>
);
}
export default App;
```
3. 在纯 JavaScript 中,可以通过 DOM 操作来控制 loading 的显示与隐藏:
```html
<div id="app">
<div id="loading">Loading...</div>
<div id="content" style="display:none;">数据加载完成后显示的内容</div>
</div>
<script>
const loading = document.getElementById('loading');
const content = document.getElementById('content');
// 模拟数据加载
setTimeout(() => {
loading.style.display = 'none';
content.style.display = '';
}, 2000);
</script>
```