vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染！今天和大家分享一下，人气推荐栏目的前端页面如何渲染内容。

经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。接下来就是模仿流程操作一遍就行了。

1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。

接口地址：“获取-人气推荐 - 柴柴老师的项目接口”

***

 如图，地址信息和调用的方式已经清楚了。

返回的类型是json格式。

对象的具体内容也有了。我们就可以开始编辑代码了。

从index.vue可以看见，我们这一次编辑的组件文件名称，叫做：“HomeHot”

在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。 

<code><script setup>

import HomePanel from './HomePanel.vue'

import { findHotAPI } from '@/apis/home'

import { ref,onMounted} from 'vue'

const hotList = ref([])

const getHotList = async () => {

const res = await findHotAPI()

hotList.value = res.result

}

onMounted(()=>getHotList())

</script>

<template>

<!--人气推荐栏目-->

<HomePanel title="人气推荐" sub-title="人气爆款 不容错过">code>

<ul class="goods-list">code>

<li v-for="item in hotList" :key="item.id">code>

<RouterLink to="/">code>

<img v-img-lazy :src="item.picture" alt="">code>

<p class="name">{ { item.title }}</p>code>

<p class="desc">{ { item.alt }}</p>code>

</RouterLink>

</li>

</ul>

</HomePanel>

</template>

<style scoped lang='scss'>code>

.goods-list {

display: flex;

justify-content: space-between;

height: 426px;

li {

width: 306px;

height: 406px;

transition: all .5s;

&:hover {

transform: translate3d(0, -3px, 0);

box-shadow: 0 3px 8px rgb(0 0 0 / 20%);

}

img {

width: 306px;

height: 306px;

}

p {

font-size: 22px;

padding-top: 12px;

text-align: center;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

.desc {

color: #999;

font-size: 18px;

}

}

}

</style>

以上内容就是，已经写好的，HomeHot的模板代码了。

里面可以看见，顶部是脚本，中间是模板，底部是样式。内容比较简单。不再解释了。不懂的可以留言。