1.返回数据如图: 数组里面嵌套对象 (用到部分的数据)


2.遍历取值

<template>
  <div>
    <ul class="list">
      <li class="child" v-for="item in movies">
        {{item.title}},评分:{{item.rating.average}}
        <p><img :src="item.images.small" alt=""></p>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      movies:[]
    }
  },
  created(){
    var url = this.HOST+"/movie/top250";
    this.$axios.get(url,{
      params:{
        count:10,
        start:0
      }
    })
      .then(res => {
        console.log(res.data)
        var result=res.data;
        this.movies = result.subjects
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
<style>
  .list{
    list-style: none;
    width: 1000px;
  }
  .child{
    float:left;
  }
</style>

3.渲染结果


4.总结

一般思路是:

数组-->for循环遍历

数组里的元素可以是简单的一层对象key:value,直接打点取值

数组里的元素还可以是二层对象,这样又嵌套了一层,继续打点访问即可。

ps:API来源--豆瓣API


Logo

Agent 垂直技术社区,欢迎活跃、内容共建,欢迎商务合作。wx: diudiu5555

更多推荐