[JavaScript] 纯文本查看 复制代码
<script>
new Vue({
el: '#vue-menu3', //div的id
data: {
all: "" //数据，名称自定
},
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>
[HTML] 纯文本查看 复制代码
<div 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>
</div>
[JavaScript] 纯文本查看 复制代码
new Vue({
el: '#vue-menu3', //div的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);
})
}
});[HTML] 纯文本查看 复制代码
<div 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>
</div>
