第一步:通过接口获取到接口里边的数据:
通过watch监听到路由的变化进行获取相对应的详情数据
第二步:
定义一个空的对象,然后进行组件传值,在详情的组件里接收
第三部:
在子组件里使用props接收(当然,使用别的接收方法也可以)
第四部:
第四部就是在该对应组件里进行数据渲染,在这里注意层次,上边就是info下边的product_pic_url这个图片路径
第五步:
看清楚我上边标记过的地方,这些地方由于并不知道到底有多少数据,或者已显示拥有大量数据的时候在代码里边建议使用v-for进行循环,以便减少代码和出错率,代码如下:
<h2>用料</h2> <div class="detail-materials-box clearfix"> <h3>主料</h3> <ul> <li v-for="item in cai.raw_material.main_material" :key="item"> {{item.name}} <span>适量</span> </li> </ul> </div> <div class="detail-materials-box clearfix"> <h3>辅料</h3> <ul > <li v-for="item in cai.raw_material.accessories_material" :key="item"> {{item.name}} <span>适量</span> </li> </ul> </div>
以下相关代码都是同理进行,都是对数据进行循环渲染到页面:
这个数据详情基本到这里就结束了,有什么问题可以对我进行私信,以便于我对于本文章进行纠错