vue.js使用ajax绑定数据之get方法

站长苏飞

JS代码

[JavaScript] 纯文本查看 复制代码

   <script>
            new Vue({
                el: '#vue-menu3',      //div的id
                data: {
                    all: ""    //数据，名称自定
                },
                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);
                        this.all = jsonObj;
                    }, function (response) {     //返回失败方法调用，暂不处理
                        console.info(response);
                    })
                }
            });
        </script>

页面代码

[HTML] 纯文本查看 复制代码

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

单独绑定

[JavaScript] 纯文本查看 复制代码

new Vue({
          el: '#vue-menu3',      //div的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);
              })
          }
      });

页面代码

[HTML] 纯文本查看 复制代码

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

Amy

强烈支持楼主ing……

惜

激动人心，无法言表！

范范

还没有学到这， 跟着楼主先看看