vue 页面展示列表

<template>
 	<div class="div1" v-for="bean in doctorList" v-bind:key="bean.id">
 		<p class="p1">{{ bean.id }}</p>
 	</div>
</template>

export default {
  name: "DoctorList",
  data() {
    return {
      doctorList: [{ id: 1 }, { id: 2 }, { id: 3 }],
    };
  },
  mounted() {
    console.log("请求");
    let that = this;
    that
      .$axios({
        method: "get", //指定请求方式
        url: "http://jsonplaceholder.typicode.com/posts", //请求接口（相对接口，后面会介绍到）
        data: {},
      })
      .then((res) => {
        //帮助突破技术瓶颈，提升思维能力
        //接口成功返回结果执行
        console.log(res);
        console.log(res.data);
        this.doctorList = res.data;
      })
      .catch(function (err) {
        console.log("请求失败" + err); //请求失败或者接口返回失败或者.then()中的代码发生错误时执行
      });
  },
};