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>

显示结果