前端ABC<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<script src="js/jquery.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message }}<br>
<table border="1">
<tr v-for="data in datas">
<td>{{data.Name}}</td>
<td>{{data.Url}}</td>
<td>{{data.Country}}</td>
</tr>
</table>
</div>
<script src="js/app.js"></script>
</body>
</html>
JS代码
//定义Vue组件
new Vue({
el: "#app",
data: {
message: "",
datas: "",
},
methods:{
showData:function () {
$.ajax({
type: 'get/post',
url: "这里是后台接口的url",
success: function (data) {
vum.datas = data.sites;
}
})
}
},
mounted: function() {
this.showData();
}
})
欢迎分享本文，转载请保留出处：前端ABC » 使用Vue.Js结合 jQ的Ajax加载数据