vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法

源码：

<div @scroll="onScroll($event)" style="height: 100%;overflow: auto;">　　<ul class="shop-brand-index" v-show="sitems.length > 0" >　　　　<li v-for="item in sitems">　　　　　　<div @click="linkUrl(item.code)"><img v-bind:src="item.publicImg"></div>　　　　</li> 　　</ul>　　<div class="loading_wrap myload disn">　　　　<p>加载中...</p>　　　　<i class="loading"></i>　　</div> </div>

解析：

$(function() {　　　　var pageNum = 1;　　　　var pageSize = 6;　　　　vue = new Vue({　　　　el: '#app',　　　　data: {　　　　　　items: [],　　　　　　pageNum: pageNum,　　　　　　pageSize: pageSize,　　　　　　rawItems: [],　　　　　　sitems:[]　　　　},　　　　methods: {　　　　　　getList: function() {　　　　　　$.showLoading();　　　　　　　　this.$http.get(store.list, {　　　　　　　　　　pageNum: pageNum,　　　　　　　　　　pageSize: pageSize　　　　　　}).then(function(result) {　　　　　　$.removeLoading();　　　　　　　　this.sitems = result.data.data.items;　　　　　　}, function() {　　　　　　　　$.removeLoading();　　　　　　　　$.showAlert({　　　　　　　　'title': '提示',　　　　　　　　'content': "页面偷懒了~~",　　　　　　　　'sure': this.close　　　　　　　　});　　　　　　})　　　　},　　　　close: function() {　　　　　　history.go(-1);　　　　},　　　　onScroll: function(event) {　　　　　　var offsetHeight = event.currentTarget.offsetHeight,　　　　　　scrollHeight = event.target.scrollHeight,　　　　　　scrollTop = event.target.scrollTop,　　　　　　scrollBottom = offsetHeight + scrollTop;　　　　　　if(scrollBottom == scrollHeight+10 ||scrollBottom == scrollHeight) {　　　　　　　if(this.pageNum == Math.ceil(this.rawItems.length / this.pageSize)) {　　　　　　　　return　　　　　　　}　　　　　　　this.pageNum++;　　　　　　　pageNum++;　　　　　　　$(".myload").removeClass("disn");　　　　　　　vue.$http.get(store.list, {　　　　　　　　　pageNum: pageNum,　　　　　　　　　pageSize: pageSize　　　　　　　}).then(function(result) {　　　　　　　　　　setTimeout(function() {　　　　　　　　　　　　$(".myload").addClass("disn");　　　　　　　　　　　　vue.sitems = vue.sitems.concat(result.data.data.items);　　　　　　　　　　}, 2000)　　　　　　　　}, function() {　　　　　　　　　$(".myload").addClass("disn");　　　　　　　　})　　　　　　}　　　　},　　},　　　　ready: function() {　　　　　　this.getList();　　　　　　for(var i = 0; i <= 1000; i++) {　　　　　　　　this.rawItems.push(i)　　　　　　}　　　　}　　})})

以上所述是小编给大家介绍的vue.js加载新的内容(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！