当前位置: 移动技术网 > IT编程>开发语言>JavaScript > vue调取数据接口后渲指定的数据

vue调取数据接口后渲指定的数据

2020年08月01日  | 移动技术网IT编程  | 我要评论
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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网