第十三届蓝桥杯第9题【数据交互】知乎首页数据动态化

最新推荐文章于 2022-12-29 17:06:24 发布

梵颜夕不会发疯

最新推荐文章于 2022-12-29 17:06:24 发布

阅读量836

点赞数 2

分类专栏：蓝桥杯文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_40818371/article/details/121729612

版权

蓝桥杯专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个Vue.js组件示例，它利用Axios库从'/static/data/list.json'获取数据，并渲染一个包含图片、标题和描述的列表。在`created`生命周期钩子中，组件初始化并调用`getList`方法获取数据，然后将数据绑定到`datalist`上。

摘要由CSDN通过智能技术生成


<template>
  <div class="list">
    <div class="list-item" v-for="item in datalist" :key="item.id">
      <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>
import axios from 'axios'
export default {
  data() {
    return {
      datalist:[]
    };
  },
  created(){
    this.getList()
  },
  methods:{
     async getList(){
      const res = await axios.get('/static/data/list.json')
      // console.log(res);
      this.datalist = res.data.data.listInfo
      // console.log(this.datalist);
    }
  }
};
</script>