【数据交互】知乎首页数据动态化

考试需求

解答：

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 要添加下面两句
import axios from 'axios'
Vue.prototype.$axios = axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    // axios,
    router,
    render: function (h) { return h(App) }
}).$mount('#app')

List.vue:

// v-for重点！以及axios在vue中的应用！
<template>
  <div class="list">
    <div v-for="item in listInfo" :key="item.id" class="list-item">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">
          {{ item.desc }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listInfo: [],
    };
  },
  methods: {
    initApproval() {
      this.$axios.get("/static/data/list.json").then((response) => {
        this.listInfo = response.data.data.listInfo;
      });
    },
  },
  created() {
    this.initApproval();
  },
};
</script>

<style scoped>
.list-item {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #dcdcdc;
}
.list-pic {
  float: right;
  width: 125px;
  height: 100px;
  display: block;
  border-radius: 4px;
}
.list-info {
  width: 500px;
  float: left;
}
.title {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.desc {
  line-height: 22px;
  font-size: 13px;
  color: #999;
}
</style>