vue调取数据接口后渲指定的数据
程序员文章站
2022-03-11 22:01:24
vue调取数据接口后渲指定的数据当我们拿到后台的数据时,可能想要渲染到页面指定的数据。什么意思呢?举个例子,就是我们拿到后台的数据可能有几十条甚至好几百条,但是我们前端需要展示的只是前十条。那么这个怎么用vue的方式来实现呢?首先我想到的是用slice()方法来进行截取。他是js的一种数组方式,不太清楚的可以自行百度。那我们先用axios拿到数据。// An highlighted blockthis.$axios.get('http://xx/List').then((response) =&g...
vue调取数据接口后渲指定的数据
当我们拿到后台的数据时,可能想要渲染到页面指定的数据。什么意思呢?举个例子,就是我们拿到后台的数据可能有几十条甚至好几百条,但是我们前端需要展示的只是前十条。那么这个怎么用vue的方式来实现呢?
首先我想到的是用slice()方法来进行截取。他是js的一种数组方式,不太清楚的可以自行百度。
那我们先用axios拿到数据。
// An highlighted block
this.$axios.get('http://xx/List').then((response) => {
this.new = response.data.data //把拿到的数据赋值给new方便一会儿做for循环
console.log(response.data.data)
}).catch((error) => {
console.log(error)
})
然后我们把拿到的数据for循环到页面上
// An highlighted block
<div v-for="(item, index) of new.slice(0, 5)" :key="index"> //这里就运用到了slice截取方法,我这里截取了五个
<div>{{item.name}}</div>
</div>
这样就拿到了我们想要展示的数据。当然方式还有很多,如果还有其他更好的方式也可以评论交流。
本文地址:https://blog.csdn.net/weixin_47038177/article/details/108122884
推荐阅读
-
解决vue中使用Axios调用接口时出现的ie数据处理问题
-
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
-
解决vue接口数据赋值给data没有反应的问题
-
vue主动刷新页面及列表数据删除后的刷新实例
-
vue中如何使用mockjs摸拟接口的各种数据
-
vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空
-
vue.js中引入vuex储存接口数据及调用的详细流程
-
Vue解决axios接口异步请求数据不同步返回的问题-async/await
-
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
-
js对接口返回的数据排序(对JOSN 数据指定属性排序,对二维数组元素指定字段排序)