如何使用vue框架Ajax获取数据列表并用BootStrap显示出来
这篇文章主要介绍如何使用vue框架Ajax获取数据列表并用BootStrap显示出来,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为成都做网站、网站设计、外贸营销网站建设,App定制开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
1.第一步肯定是包的导入了
目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp
vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装
bootstrap既就是样式的相关css和js了
-2.vue发送ajax请求
后台数据已写好,返回为json数据如下:
{ "id": "1305120309", "violates": 0, "borrows": 0, "overdraft": 0, "notReturns": 0, "libraryBooks": [ { "chargePerson": "王大海", "borrowTime": "2017-04-22 18:05:10", "name": "计算机入门", "bookId": "051301" }, { "chargePerson": "王大海", "borrowTime": "2017-04-22 18:06:11", "name": "软件工程", "bookId": "051302" } ] }
vue Ajax请求代码如下:
-3.界面列表显示
table的class使用bootstrap样式,其他样式可见菜鸟教程
table标签tr开始遍历libraryInfo数据,语法为value in libraryInfo简单易懂
借阅书籍列表 书籍编号 书名 管理人员 借阅时期 归还时间 {{value.bookId}} {{value.name}} {{value.chargePerson}} {{value.borrowTime}} {{value.returnTime}}
最后结果如下:
以上是“如何使用vue框架Ajax获取数据列表并用BootStrap显示出来”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文题目:如何使用vue框架Ajax获取数据列表并用BootStrap显示出来
当前地址:http://myzitong.com/article/jspidp.html