vue+ajax实现页面加载完成后渲染页面

最新推荐文章于 2025-05-09 10:16:27 发布

原创最新推荐文章于 2025-05-09 10:16:27 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文分享了一个Vue抽奖系统的改造经验，旨在实现页面加载时立即渲染。通过将数据获取过程放置于created生命周期钩子内，确保了页面初始化时数据已就绪。

学完vue很长时间了但是一直在实际工作开始中用到感觉忘完了。最近年底正好比较闲。把最近写的一个抽奖系统改造一下。

其实代码很简单。我想实现页面加载完成立马去渲染页面

new Vue({
			el:"#award",
			data:{
				msg:[]
			},
			methods:{
				getData:function(){
					let self = this;
					$.ajax({
						type:"get",
						url:ss.urlMapping['GETALLAWARD'],
						async:false,
						data:{},
						dataType:"json",
						success:function(data){
							self.msg = data.data
						},
						error:function(data){
							
						}
					});
				}
			},
			created:function(){
				this.getData();
			}
		})

<div class="center">
			<p>选择奖项:</p>
			<select id="award" style="width: 200px;">
				<option value="-1">请选择奖项</option>
				<option  v-for="data in msg" :value="data.id">{{data.name}}</option>
			</select>
		</div>

其实这是我百度出来的结果。我一开始的写法是把ajax这个过程写在created生命周期函数里面，但是不知道为什么一直加载不成功。希望有大佬帮忙解答一下。