那个网站专门做婚纱相册,查网址是否安全,免费php域名网站,wordpress漂亮的主题vue3前端开发-小兔鲜项目-产品详情基础数据渲染#xff01;这一次内容比较多#xff0c;我们分开写。第一步先完成详情页面的基础数据的渲染。然后再去做一下右侧的热门产品的列表内容。 第一步#xff0c;还是老规矩#xff0c;先准备好接口函数。方便我们的页面组件拿到对…vue3前端开发-小兔鲜项目-产品详情基础数据渲染这一次内容比较多我们分开写。第一步先完成详情页面的基础数据的渲染。然后再去做一下右侧的热门产品的列表内容。 第一步还是老规矩先准备好接口函数。方便我们的页面组件拿到对应的产品信息数据。
import request from /utils/httpexport const getDetail (id) {return request({url: /goods,params: {id}})
}
这个位置还是在apis文件夹下面新建了一个detail.js 第二步在组件内调用这个接口函数自定义好对应的页面数据对象。开始绑定数据即可。
script setup
import {getDetail} from /apis/detail
import {ref,onMounted} from vue
import { useRoute } from vue-router;
const route useRoute()
const goods ref({})
const getGoods async (){const res await getDetail(route.params.id)goods.value res.result
}
onMounted(()getGoods())
/script
代码比较简单我们不再一一介绍了。大家都能看得懂。 第三步就是把这个数据对象渲染到页面组件内。
templatediv classxtx-goods-pagediv classcontainer v-ifgoods.detailsdiv classbread-containerel-breadcrumb separatorel-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item :to{ path: /category/${goods.categories[1].id} }{{goods.categories[1].name}}/el-breadcrumb-itemel-breadcrumb-item :to{ path: /category/sub/${goods.categories[0].id} }{{goods.categories[0].name}}/el-breadcrumb-itemel-breadcrumb-item{{goods.name}}/el-breadcrumb-item/el-breadcrumb/div!-- 商品信息 --div classinfo-containerdivdiv classgoods-infodiv classmedia!-- 图片预览区 --!-- 统计数量 --ul classgoods-saleslip销量人气/pp {{goods.salesCount}} /ppi classiconfont icon-task-filling/i销量人气/p/lilip商品评价/pp{{goods.commentCount}}/ppi classiconfont icon-comment-filling/i查看评价/p/lilip收藏人气/pp{{goods.collectCount}}/ppi classiconfont icon-favorite-filling/i收藏商品/p/lilip品牌信息/pp{{goods.brand.name}}/ppi classiconfont icon-dynamic-filling/i品牌主页/p/li/ul/divdiv classspec!-- 商品信息区 --p classg-name {{goods.name}} /pp classg-desc{{ goods.desc }} /pp classg-pricespan{{ goods.price }}/spanspan {{ goods.oldPrice }}/span/pdiv classg-servicedldt促销/dtdd12月好物放送,App领券购买直降120元/dd/dldldt服务/dtddspan无忧退货/spanspan快速退款/spanspan免费包邮/spana hrefjavascript:;了解详情/a/dd/dl/div!-- sku组件 --!-- 数据组件 --!-- 按钮组件 --divel-button sizelarge classbtn加入购物车/el-button/div/div/divdiv classgoods-footerdiv classgoods-article!-- 商品详情 --div classgoods-tabsnava商品详情/a/navdiv classgoods-detail!-- 属性 --ul classattrsli v-foritem in goods.details.properties :keyitem.valuespan classdt{{ item.name }}/spanspan classdd{{item.value}}/span/li/ul!-- 图片 --img v-forimg in goods.details.pictures v-img-lazyimg :keyimg//div/div/div!-- 24热榜专题推荐 --div classgoods-aside/div/div/div/div/div/div
/template
声明这里为了避免出现生命周期函数引起的故障我们做了一个v-if的条件判定。当拿到了数据后我们再让框架去渲染。否则是报错的提示undefined. 一切正常。
