完成列表显示功能
在这一步中,你将学习如何通过axios请求主页文章列表数据并将其绑定到List.vue
组件。
打开位于src/components
文件夹中的List.vue
文件。
在<script>
标签下导入axios
库:
// TODO
import axios from "axios";
在data()
函数中,定义一个dataList
属性来存储列表数据:
data() {
return {
dataList: []
};
}
在created()
生命周期钩子中,调用getList()
方法来获取列表数据:
created() {
this.getList();
}
实现getList()
方法,从public/static/data/list.json
文件中获取数据:
methods: {
getList() {
axios.get("./static/data/list.json").then((res) => {
this.dataList = res.data.data.listInfo;
});
}
}
<script>
标签内的完整代码如下:
<script>
// TODO
import axios from "axios";
export default {
data() {
return {
dataList: []
};
},
created() {
this.getList();
},
methods: {
getList() {
axios.get("./static/data/list.json").then((res) => {
this.dataList = res.data.data.listInfo;
});
}
}
};
</script>
在模板中,使用v-for
指令来渲染列表项:
<template>
<div class="list">
<!-- TODO -->
<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>
这一步确保了主页文章列表数据从public/static/data/list.json
文件中获取并绑定到List.vue
组件。
通过遵循这些步骤,你已经完成了主页数据的动态化,包括从public/static/data/list.json
文件中获取数据并以所需的布局渲染列表项。
完成后的效果如下: