ホームページ > ウェブフロントエンド > jsチュートリアル > Vue.js と ajax を使用してデータをバインドする方法

Vue.js と ajax を使用してデータをバインドする方法

不言
リリース: 2018-07-11 17:42:57
オリジナル
2012 人が閲覧しました

この記事では、主に 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);
                    })
                }
            });
ログイン後にコピー

vue-resource.jsとvue.min.jsを引用する必要があります

以上がこの記事の全内容です。さらに関連コンテンツがある場合は、PHP 中国語ネットにご注目ください。

関連するおすすめ:

Vue 文字列テンプレートの紹介

JavaScriptでスタックを実装する方法

以上がVue.js と ajax を使用してデータをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート