如何使用Vue.js配合ajax绑定数据

这篇文章主要介绍了关于Vue.js配合ajax绑定数据的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

　页面代码

        

            

                
借阅书籍列表
                

                    

                        
书籍编号{{all.id}}
                        
书名
                        
管理人员
                        
借阅时期
                        
归还时间
                    
                
                

                    

                        
{{value.bookId}}
                        
{{value.name}}
                        
{{value.chargePerson}}
                        
{{value.borrowTime}}
                        
{{value.returnTime}}
                    
                
            
        

以下是数据单独绑定

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

　　页面代码

   

            

                
借阅书籍列表
                

                    

                        
书籍编号
                        
书名
                        
管理人员
                        
借阅时期
                        
归还时间
                    
                
                

                    

                        
{{value.bookId}}
                        
{{value.name}}
                        
{{value.chargePerson}}
                        
{{value.borrowTime}}
                        
{{value.returnTime}}
                    
                
            
        

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Synths.Video

一键将文章转换为带有真人头像和画外音的视频

下载

立即学习“前端免费学习笔记（深入）”；

相关推荐：

 Vue 字符串模板的介绍

如何用JavaScript实现一个栈