Vue实现页面加载效果

 <!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="loading">
				<span>加载请求中 ......</span>
			</div>
			{{info}}
		</div>
		<script>
			new Vue({
				el: "#app",
				data: function(){
					return {
						info: null,
						loading: true,
						errored: false,
					}
				},
				filters: {
					currencyDecimal: function(val){
						return val.toFixed(2);
					}
				},
				mounted() {
					 axios
					      .get('http://httpbin.org/get', "wangzz")
					      .then(response => {
							  console.log(JSON.stringify(response))
					        this.info = response.data.headers;
					      })
					      .catch(error => {
					        console.log(error)
					        this.errored = true
					      })
					      .finally(() => this.loading = false)
				}
			})
		</script>
	</body>
</html>
 
<!--
		★★★设计一个加载效果，然后在根本无法获取数据的时候通知用户
		
		这样我们就会知道在请求 API 的过程中是否有地方出错了，
		不过当数据长时间生成不出来或 API 不工作的时候会怎样呢？
		现在用户将会什么都看不到。我们可能想为这种情况构建一个加载效果，
		然后在根本无法获取数据时通知用户。
-->

posted @ 2022-07-29 11:06 Felix_Openmind 阅读(1271) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3中滚动加载更多数据

· Vue3中props+v-bind+计算属性+CSS样式混合使用案例

· vue-实现loading页面

· vue性能优化

· 【前端效果】vue框架使用CSS样式实现loading效果

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue实现页面加载效果

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div id="app">
	<div v-if="loading">
	<span>加载请求中 ......</span>
	</div>
	{{info}}
	</div>
	<script>
	new Vue({
	el: "#app",
	data: function(){
	return {
	info: null,
	loading: true,
	errored: false,
	}
	},
	filters: {
	currencyDecimal: function(val){
	return val.toFixed(2);
	}
	},
	mounted() {
	axios
	.get('http://httpbin.org/get', "wangzz")
	.then(response => {
	console.log(JSON.stringify(response))
	this.info = response.data.headers;
	})
	.catch(error => {
	console.log(error)
	this.errored = true
	})
	.finally(() => this.loading = false)
	}
	})
	</script>
	</body>
	</html>

	<!--
	★★★设计一个加载效果，然后在根本无法获取数据的时候通知用户

	这样我们就会知道在请求 API 的过程中是否有地方出错了，
	不过当数据长时间生成不出来或 API 不工作的时候会怎样呢？
	现在用户将会什么都看不到。我们可能想为这种情况构建一个加载效果，
	然后在根本无法获取数据时通知用户。
	-->