zoukankan      html  css  js  c++  java
  • Vue.js配合ajax绑定数据

    绑定全部数据
    <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>

     页面代码

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

      

    以下是数据单独绑定

          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);
                        })
                    }
                });
    

      页面代码

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

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

     

  • 相关阅读:
    jvisualm 结合 visualGC 进行jvm监控,并分析垃圾回收
    linux 查看服务器cpu 与内存配置
    arthas 使用总结
    selinux contexts 安全上下文的临时更改
    Android 8.1 Doze模式分析(五) Doze白名单及Debug方式
    Window 任意窗口置顶软件Window TopMost Control
    Android ApkToolPlus一个可视化的跨平台 apk 分析工具
    SVN Please execute the 'Cleanup' command.
    Android 如何在64位安卓系统中使用32位SO库
    Android cmd命令查看apk是32位还是64位?
  • 原文地址:https://www.cnblogs.com/Harvard-L/p/9293456.html
Copyright © 2011-2022 走看看