一个vue请求接口渲染页面的例子
2023-09-11 14:19:38 时间
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name": "特色项目", "program_list": [{ "check_program_id": "1", "program_name": "HRA健康风险评估与疾病早筛", "program_price": "440" }, { "check_program_id": "2", "program_name": "血清胃功能检测", "program_price": "187" }, { "check_program_id": "3", "program_name": "视力快速筛查", "program_price": "22" }, { "check_program_id": "4", "program_name": "低剂量螺旋CT肺癌筛查", "program_price": "260" }] } ] }, methods: { post: function (url, data) { return new Promise(function(resolve, reject) { $.ajax({ type: 'POST', url: url, data:{'action':'check_program_list','user_id':data}, success: function(res) { resolve(res); } }) }); } }, created () { var _this= this; this.post('http://***/api/check_program.php', '1').then(function(res){ var datas = $.parseJSON( res ); console.log(datas.data); _this.list=datas.data; }); } }); }
一个vue请求接口渲染页面的例子
相关文章
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
- vue - (v-pre、v-cloak、v-once)
- Vue - 超详细 “纯前端“ 将阿里云 OSS 文件删除流程,支持单个 / 批量删除文件(附带完整示例运行源码,保证新手小白 100% 轻松实现删除功能)
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- vue-cli 和 vite 全局变量定义和使用
- vue/cle3项目运行报错sockjs-node/info解决方案
- vue 调用接口配置
- vue-element-admin完整项目实例
- vue生命周期之缓存过的页面刷新数据逻辑
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
- VUE-001-在表格单元格(el-table-column)中添加超链接访问
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue实战入门基础篇五:从零开始仿门户网站实例-关于我们实现
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- 【Ant Design Vue】之layout布局
- 沙箱支付宝支付 SpringBoot+Vue前后端分离项目 实战
- Vue:自定义指令的简单用法以及自定义指令模块化