vueはajaxを使ってバックグラウンドデータを取得して表示する例
実例は以下の通りです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue.min.js"></script>
<script src="/vue-resource.min.js"></script>
<style>
#th th{
background-color: #50a9fa;
color: aliceblue;
font-size: large;
}
</style>
</head>
<body >
<div id="app" align="center">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData"> </button>
<table id="th" border="1"solid width="400px">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="item in list ">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)" rel="external nofollow" > </a>
</td>
</tr>
</table>
</div>
<script>
//vue
new Vue({
el:'#app',
data:{
list:[]
},
//vue
// created
created:function () {
this.getlist();// ，vue
},
methods:{
getlist:function () {
// api
this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
//
if(response.body.status!=0)
{
alert(response.body.message);
return ;
}
//
this.list=response.body.message;
});
}
}
});
</script>
</body>
</html>