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();
})
分享名称：Vue列表实战教程
路径分享：
http://cdxtjz.cn/article/pjoojd.html
