使用Vue.Js结合 jQ的Ajax加载数据

原创 潇潇纪 教程 学习笔记 568阅读 2017-05-10 10:08:16 举报
html 代码

[p]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</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>
[/p]

JS代码

//定义Vue组件
new Vue({
el: "#app",
data: {
message: "",
datas: "",

},
methods:{
    showData:function () {
        $.ajax({
            type: 'get/post',
            url: "这里是后台接口的url",
            success: function (data) {
                this.datas = data.sites;
            }
        })
    }
},

mounted: function() {
this.showData();
}
})

有用可以收藏!

评论 ( 2 )
最新评论
潇潇纪 1F 2017-05-10 10:20:06 2F

也可以用别的啊 用resource或者axios 都行啊

asak47ak 2017-05-10 10:16:25 1F

用了vue,为什么还要用jq的ajax呢?