Html代碼

<tbody?id="itemtr"><tr??is="item-row"??v-for="item?in?items"?v-on:editclick="editclick"??v-on:removeclick="removeclick"?v-bind:item="item"></tr><!--?more?data?--> </tbody>

定義JavaScript模板

<script?type="text/x-template"?id="item-tr"?><tr?v-bind:id="'tr_'?+item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td><button??v-on:click="editclick">編輯</button><button??v-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請求數據

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(); })

轉載于:https://blog.51cto.com/13717297/2149678

總結

以上是生活随笔為你收集整理的Vue列表实战教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。