这篇文章主要介绍了关于Vue.js配合ajax绑定数据的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<script>
new Vue({
el: '#vue-menu3', //p的id
data: { : "" //数据，名称自定
},
created: function () { //created方法，页面初始调用
var url = "GetData.ashx";
this.$http.get(url).then(function (data) { //ajax请求封装
var json = data.body;
var jsonObj = eval('(' + json + ')');
// console.info(jsonobj);
this.all = jsonObj;
}, function (response) { //返回失败方法调用，暂不处理
console.info(response);
})
}
});
</script>页面代码
<p id="vue-menu3">
<table class="table table-striped" >
<caption>借阅书籍列表</caption>
<thead>
<tr>
<th>书籍编号{{all.id}}</th>
<th>书名</th>
<th>管理人员</th>
<th>借阅时期</th>
<th>归还时间</th>
</tr>
</thead>
<tbody>
<tr v-for="value in all.libraryBooks">
<td>{{value.bookId}}</td>
<td>{{value.name}}</td>
<td>{{value.chargePerson}}</td>
<td>{{value.borrowTime}}</td>
<td>{{value.returnTime}}</td>
</tr>
</tbody>
</table>
</p>以下是数据单独绑定
new Vue({
el: '#vue-menu3', //p的id
data: { libraryInfo: "" //数据，名称自定
},
created: function () { //created方法，页面初始调用
var url = "GetData.ashx";
this.$http.get(url).then(function (data) { //ajax请求封装
var json = data.body;
var jsonobj = eval('('+json+')');
console.info(jsonobj);
//我的json数据参考下面
this.libraryInfo = jsonobj.libraryBooks;
}, function (response) { //返回失败方法调用，暂不处理
console.info(response);
})
}
});页面代码
<p id="vue-menu3">
<table class="table table-striped">
<caption>借阅书籍列表</caption>
<thead>
<tr>
<th>书籍编号</th>
<th>书名</th>
<th>管理人员</th>
<th>借阅时期</th>
<th>归还时间</th>
</tr>
</thead>
<tbody>
<tr v-for="value in libraryInfo">
<td>{{value.bookId}}</td>
<td>{{value.name}}</td>
<td>{{value.chargePerson}}</td>
<td>{{value.borrowTime}}</td>
<td>{{value.returnTime}}</td>
</tr>
</tbody>
</table>
</p>必须引用 vue-resource.js 和vue.min.js
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是如何使用Vue.js配合ajax绑定数据的详细内容。更多信息请关注PHP中文网其他相关文章！
