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

<!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加载数据

赞 (3)
分享到:更多 ()

发表评论 0