Vue列表实战教程-创新互联

Html代码

定义JavaScript模板

	
		{{item.id}}
		{{item.name}}

		
			编辑
			删除
		
	

components组件

Vue.component("item-row", {
	props: ["item"],
	template: "#item-tr",
	methods: {
		editclick: function () {
			this.$emit('editclick', this.item)
		},
		removeclick: function () {
			this.$emit('removeclick', this.item)
		}
	}
})

Ajax请求数据

function loadItems() { 
	$.ajax({
		method: "GET",
		url: "/Article/getallArticle",
		data: {},
		success: function (backData) {
			console.log(backData);
			if (backData.code == 1) {

				new Vue({
					el: '#itemtr',
					data: {
						items: backData.data
					},
					methods: {
						editclick: function (itemObject) {
							console.log(itemObject)
						},
						removeclick: function (itemObject) {
							console.log(itemObject)
						}
					}   
				})

			} else { 
				layer.msg(backData.msg);
			}
		   
		},
		error: function (error) {

			layer.msg(error.statusText);
		}
	})
}

执行函数

$(function () {
    loadItems();
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。