So verwenden Sie Vue.js mit Ajax, um Daten zu binden

Dieser Artikel stellt hauptsächlich die Methode zum Binden von Daten mit Vue.js und Ajax vor. Jetzt kann ich ihn mit Ihnen teilen

        <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>

Seitencode >

        <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>

Das Folgende ist die Datenbindung separat

      new Vue({
                el: '#vue-menu3',      //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('('+json+')');
                        console.info(jsonobj);
        
                        //我的json数据参考下面
                        this.libraryInfo = jsonobj.libraryBooks;
                    }, function (response) {     //返回失败方法调用，暂不处理
                        console.info(response);
                    })
                }
            });

　Seitencode

   <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 und vue.min.js müssen zitiert werden

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Vue Einführung in String-Vorlagen

So implementieren Sie einen Stack in JavaScript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue.js mit Ajax, um Daten zu binden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!