vue项目开发,后端接口还没有做好,前端如何利用$axios
调用模拟数据。下面编程教程网小编给大家简单介绍一下实现代码!
1、模拟数据ceshi.json
{
code:"200",
list:[{
id:1001,
name:'小米',
school:'清北大学'
},{
id:1002,
name:'小明',
school:'浙南大学'
},{
id:1003,
name:'小林',
school:'华夏大学'
}]
}
2、数据赋值
<div>
<el-table
:data="listData"
border
style="width: 100%">
<el-table-column
fixed
prop="name"
label="姓名"
width="150">
</el-table-column>
<el-table-column
prop="school"
label="学校"
width="120">
</el-table-column>
</el-table>
</div>
3、$axios接口调用
<script>
import axios from 'axios'
export default{
data(){
return {
listData:[],
}
},
mounted () {
this.getList()
},
methods: {
getList () {
this.$axios.get('/static/ceshi.json').then(res => {
if(res && res.data && res.data.code === 200){
this.listData = res.data.list
}
})
}
}
}
</script>
以上是编程学习网小编为您介绍的“vuejs如何利用$axios调用json模拟数据”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:vuejs如何利用$axios调用json模拟数据


基础教程推荐
猜你喜欢
- 实现CSS圆环的5种方法(小结) 2024-02-04
- 【手写笔记】服务器上配置环境+nginx启动+配置安全组+测试html+wget+爬虫+上传文件scp+rsync+网页+更改域名+看自己的ip+爬虫项目+asca+shell编程+ 2023-10-25
- 水平居中块级元素较好的实现 2023-12-27
- 详解css清除浮动float的七种常用方法总结和兼容性处理 2024-01-25
- 微信小程序设置地图标记点,触发显示详细信息 2024-12-14
- HTML:如何设置网页标题上的图标 2023-10-26
- CSS极坐标的实例代码 2022-09-20
- ajax接口文档url路径的简写实例 2023-02-23
- AJAX如何实现无刷新登录功能 2023-01-26
- css定义checkbox复选框背景颜色和选中样式 2024-12-13