QQ：285679784   欢迎加入博主CSDN资源QQ群799473954(附加信息：CSDN博客)一起学习 !

 

参考原文：https://blog.csdn.net/myppbird/article/details/85598154

Vue.js教程：http://www.runoob.com/vue2/vue-tutorial.html

Vue.js Ajax教程：http://www.runoob.com/vue2/vuejs-ajax.html

Vue.js文件引用

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

aspx.cs后台创建Ajax方法

[WebMethod]
public static dynamic getStuList()
{StuWork.BLL.biz_students_info bll = new StuWork.BLL.biz_students_info();DataTable dt = bll.GetListByPage("", "", 1, 2).Tables[0];var count = 25;var dnc= new{pageIndex = 1,count,data = bll.DataTableToList(dt)};return dnc;
}

JavaScript代码

<script>
window.onload = function(){var vm = new Vue({el:'#box',data:{fetchData:null,},methods: {fetchData: function () {this.stuShow = [];this.$http.post("http://localhost:8008/biz_students_info/StuList.aspx/getStuList").then(response => {console.info(response);this.total = response.body.d.count;this.stuShow = response.body.d.data;}).catch(response => this.$alert(response.body.Message, "展示学生信息", { type: "error" }));},sizeChange: function (pageSize) {this.pageSize = pageSize;this.fetchData();},pageIndexChange: function (pageIndex) {this.pageIndex = pageIndex;this.fetchData();}}});
}
</script>

显示结果