vue3前端开发-小兔鲜项目-热门品牌推荐栏目！这一期内容，大家一定要认真的看完。因为，黑马官方教程视频里面老师没有讲这个，但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。做个参考demo。

---

第一步：写好模板文件，HomeBran.vue的基础内容。

<script setup>
import HomePanel from './HomePanel.vue'
import {ref,onMounted} from 'vue'
import {findBrandAPI} from '@/apis/home'
const brandList = ref([])
const getBrandList = async () => {const res = await findBrandAPI()brandList.value = res.result
}
onMounted(()=>getBrandList())
</script><template>
<!--热门品牌栏目--><HomePanel title="热门品牌" sub-title="大厂质量 值得信赖"><ul class="brands-list"><li v-for="item in brandList" :key="item.id"><RouterLink to="/"><img v-img-lazy="item.picture" :alt="item.name" ><p class="chname">{{ item.name }}</p><p class="enname">{{ item.nameEn }}</p><p class="desc">{{ item.desc }}</p><p class="place">{{ item.place }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.brands-list{display: flex;justify-content: space-between;height: 265px;li {width:153px;height: 203px;transition: all .5s;&:hover{transform: translate3d(0,-3px,0);box-shadow: 0 3px 8px rgb(0, 0, 0);}img{width:153px;height: 153px;}.chname{font-size: 18px;padding-top:4px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.enname{font-size: 16px;padding-top:4px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.desc{font-size: 12px;padding-top:4px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #222423;}.place{font-size: 10px;padding-top:4px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #222423;}}
}
</style>

---

第二步：准备好各种调用接口的资料。

/*** @description: 获取热门品牌* @returns */
export const findBrandAPI = () =>{return httpInstance({url:'/home/brand'})
}

这个是home.js文件中，需要增加的接口调用的内容。

在首页面的里面调用这个热门品牌的模块组件。就可以刷新渲染出来了。css样式我自己定义了一下，大家可以根据个人习惯，自己定义css内容。

---

 如图，调用接口渲染出来的数据，是默认是10条数据。