Html代码

<tbodyid="itemtr"><tris="item-row"v-for="iteminitems"v-on:editclick="editclick"v-on:removeclick="removeclick"v-bind:item="item"></tr><!--moredata--></tbody>

定义JavaScript模板

<scripttype="text/x-template"id="item-tr"><trv-bind:id="'tr_'+item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td><buttonv-on:click="editclick">编辑</button><buttonv-on:click="removeclick">删除</button></td></tr></script>

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请求数据

functionloadItems(){$.ajax({method:"GET",url:"/Article/getallArticle",data:{},success:function(backData){console.log(backData);if(backData.code==1){newVue({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();})