后端返回的数据，如何在前端进行渲染_后端返回数组对象,前端如何渲染表格

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