vue.js中ajax请求

时间:2021-07-06 07:25:23
<div id="app">
<table style="border-collapse: collapse">
<thead>
<tr style="line-height: 30px;">
<th style="width:20px; padding: 0 10px; border: 1px solid #ccc;">id</th>
<th style="width:150px; padding: 0 10px; border: 1px solid #ccc;">item_name</th>
<th style="width:500px; padding: 0 10px; border: 1px solid #ccc;">content</th>
<th style="width:80px; padding: 0 10px; border: 1px solid #ccc;">way</th>
<th style="width:150px; padding: 0 10px; border: 1px solid #ccc;">method</th>
</tr>
</thead>
<tbody>
<tr v-for="items in message" style="line-height: 30px;">
<td style="width:20px; padding: 0 10px; border: 1px solid #ccc;">{{ items.id }}</td>
<td style="width:150px; padding: 0 10px; border: 1px solid #ccc;">{{ items.item_name }}</td>
<td style="width:500px; padding: 0 10px; border: 1px solid #ccc;">{{ items.content }}</td>
<td style="width:80px; padding: 0 10px; border: 1px solid #ccc;">{{ items.way }}</td>
<td style="width:150px; padding: 0 10px; border: 1px solid #ccc;">{{ items.method }}</td>
</tr>
</tbody>
</table>
</div> <script>
var app = new Vue({
el:"#app10",
data:{
message:''
},
methods:{
created:function(){
var sss = this;
$.ajax({
url:"请求地址",
success:function(e){
sss.message = e.data;
console.log(sss.message)
}
})
}
}
});
app.created();
</script>