vue3前端开发-小兔鲜项目-热门品牌推荐栏目

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条数据。

相关推荐
爷_4 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee445 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro6 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin6 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说7 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4537 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2437 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋37 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA7 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你7 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat