vue使用ajax获取后台数据进行显示的示例
程序员文章站
2022-03-31 13:45:22
实例如下所示:
实例如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"></script> <style> #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } </style> </head> <body > <div id="app" align="center"> <input type="text" v-model="id"> <input type="text" v-model="pname"> <button @click="adddata">添加数据</button> <table id="th" border="1"solid width="400px"> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> <tr v-for="item in list "> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="javascript:void(0)" rel="external nofollow" >删除</a> </td> </tr> </table> </div> <script> //vue的生命周期 new vue({ el:'#app', data:{ list:[] }, //vue对象实例创建成功之后就会自动调用这个方法 //如果你想写的方法在舒适化的时候就被调用的话就要要用到created这个 created:function () { this.getlist();//这里定义这个方法,vue实例之后运行到这里就调用这个函数 }, methods:{ getlist:function () { //请求服务器的api获取到品牌的数据列表 this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) { //处理服务器异常信息提示 if(response.body.status!=0) { alert(response.body.message); return ; } //处理正常的逻辑数据处理 this.list=response.body.message; }); } } }); </script> </body> </html>
以上这篇vue使用ajax获取后台数据进行显示的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 同事是那种喷你一脸的喷
下一篇: AJAXRequest v0.2
推荐阅读
-
Jquery 使用Ajax获取后台返回的Json数据后,页面处理
-
jquery 通过ajax请求获取后台数据显示在表格上的方法
-
详解vue 中使用 AJAX获取数据的方法
-
ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
-
vue使用ajax获取后台数据进行显示的示例
-
DM数据库表中的CLOB字段,使用ajax查询并显示结果时无法获取该字段值
-
Select2在使用ajax获取远程数据时显示默认数据的方法
-
使用OpenLayers根据经纬度对地图进行多个标点,以及点击标点弹框的实现(从后台数据库获取经纬度数据)
-
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
-
Jquery 使用Ajax获取后台返回的Json数据后,页面处理