[JavaScript知识库]第十三届蓝桥杯（Web 应用开发）线上模拟赛【第九题】（知乎首页数据动态化）

第十三届蓝桥杯（Web 应用开发）线上模拟赛参考答案全集

考试需求

通过 axios 请求知乎首页文章列表数据并绑定到 List.vue 组件。
API 接口地址
文章列表 public/static/data/list.json
接口响应示例
首页布局样式与效果图保持一致。

解决办法

在list.vue文件中先用axios请求请求加载json文件，前端用vue的v-for语句和v-bind进行渲染（初始化请求接口用create方法）

参考代码

先在main.js中引入axios

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.config.productionTip = false

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

再进行axios操作和v-for遍历

./src/components/list.vue

 <template>
  <div class="list">
    <div
      class="list-item"
      v-for="item in dataList"
    >
      <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 {
  
  created(){
    // 页面初始化，用于请求数据
    this.$axios.get('./static/data/list.json').then(res=>{
      this.dataList = res.data.data.listInfo;
    })
  },
  data() {
    return {
      dataList: []
    };
  }
};
</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>