美食杰----菜谱大全

最新推荐文章于 2023-11-29 02:06:33 发布

WangLingyun111

最新推荐文章于 2023-11-29 02:06:33 发布

阅读量527

点赞数 3

分类专栏：项目 vue 美食杰文章标签： html vue.js js

本文链接：https://blog.youkuaiyun.com/m0_62201566/article/details/120678287

版权

本文介绍了如何创建美食杰菜谱大全的页面，详细流程包括获取数据、数据渲染、路由监听、条件判断及点击事件处理。通过vue.js和js技术实现页面效果，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程：

拿到数据----渲染数据----监听路由传参----判断----写点击事件

1.在api里面拿到数据getClassify, getProperty, getMenus。

2.再创建个空数组classify存放数据，把数据赋值给data。

3.渲染数据，用v-for渲染数据。

4.在watch里深度监听路由传参。

5.再用if判断，判断是否点击，如果点击过就取消；否则，选中。

6.用@click写点击事件，点击的时候地址栏中的路径也会发生变化。

页面效果展示：

代码展示：

<template>
  <div class="recipe">
    <!-- v-model="activeName" -->
    <!-- 菜谱分类 start -->
    <el-tabs v-model="classifyName" type="border-card">
      <el-tab-pane
        v-for="item in classify"
        :key="item.parent_type"
        :label="item.parent_name"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <router-link
            :to="{ query: { ...$router.query, classify: option.type } }"
            v-for="option in item.list"
            :key="option.type"
            :class="{ active: classifyType === option.type }"
          >
            {
  { option.name }}
          </router-link>
        </div>

最低0.47元/天解锁文章