美食杰-菜谱详情页

最新推荐文章于 2025-11-24 09:30:00 发布

原创最新推荐文章于 2025-11-24 09:30:00 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文介绍如何利用HTML5实现美食杰菜谱详情页。首先通过接口获取数据，然后通过Vue的watch监听路由变化获取详情。接着在组件间传递数据，使用props在子组件中接收并渲染。在页面中，对包括图片路径在内的数据进行v-for循环渲染，提高代码效率和准确性。若遇到问题，可通过私信寻求帮助。

第一步：通过接口获取到接口里边的数据：

通过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>

以下相关代码都是同理进行，都是对数据进行循环渲染到页面：