首頁 >web前端 >js教程 >如何使用Vue.js配合ajax綁定數據

如何使用Vue.js配合ajax綁定數據

不言
不言原創
2018-07-11 17:42:572025瀏覽

這篇文章主要介紹了關於Vue.js配合ajax綁定資料的方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

        <script>
            new Vue({
                el: &#39;#vue-menu3&#39;,      //p的id
                data: {                    : ""    //数据,名称自定
                },
                created: function () { //created方法,页面初始调用    
                    var url = "GetData.ashx";
                    this.$http.get(url).then(function (data) {   //ajax请求封装
                        var json = data.body;
                        var jsonObj = eval(&#39;(&#39; + json + &#39;)&#39;);
                       // console.info(jsonobj);
                        this.all = jsonObj;
                    }, function (response) {     //返回失败方法调用,暂不处理
                        console.info(response);
                    })
                }
            });
        </script>

 頁碼

        <p id="vue-menu3">
            <table class="table table-striped" >
                <caption>借阅书籍列表</caption>
                <thead>
                    <tr>
                        <th>书籍编号{{all.id}}</th>
                        <th>书名</th>
                        <th>管理人员</th>
                        <th>借阅时期</th>
                        <th>归还时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in all.libraryBooks">
                        <td>{{value.bookId}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.chargePerson}}</td>
                        <td>{{value.borrowTime}}</td>
                        <td>{{value.returnTime}}</td>
                    </tr>
                </tbody>
            </table>
        </p>

以下是資料單獨綁定

      new Vue({
                el: &#39;#vue-menu3&#39;,      //p的id
                data: {                    libraryInfo: ""    //数据,名称自定
                },
                created: function () { //created方法,页面初始调用    
                    var url = "GetData.ashx";
                    this.$http.get(url).then(function (data) {   //ajax请求封装
                        var json = data.body;
                        var jsonobj = eval(&#39;(&#39;+json+&#39;)&#39;);
                        console.info(jsonobj);
        
                        //我的json数据参考下面
                        this.libraryInfo = jsonobj.libraryBooks;
                    }, function (response) {     //返回失败方法调用,暂不处理
                        console.info(response);
                    })
                }
            });

  頁面程式碼

   <p id="vue-menu3">
            <table class="table table-striped">
                <caption>借阅书籍列表</caption>
                <thead>
                    <tr>
                        <th>书籍编号</th>
                        <th>书名</th>
                        <th>管理人员</th>
                        <th>借阅时期</th>
                        <th>归还时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in libraryInfo">
                        <td>{{value.bookId}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.chargePerson}}</td>
                        <td>{{value.borrowTime}}</td>
                        <td>{{value.returnTime}}</td>
                    </tr>
                </tbody>
            </table>
        </p>

  必須引用 vue-resource.js 和vue.min.js

#以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關建議:

 Vue 字串模板的介紹

如何用JavaScript實作一個堆疊

以上是如何使用Vue.js配合ajax綁定數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn