美食杰项目（菜谱大全）效果介绍

最新推荐文章于 2025-09-09 15:50:50 发布

原创

最新推荐文章于 2025-09-09 15:50:50 发布 · 643 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #css

本文介绍了美食杰项目的菜谱大全效果，包括HTML5和CSS实现的tab切换、筛选及分页功能。使用Vue脚手架、Element组件库和Vue Router，展示效果包括家常菜谱、各地小吃的分类切换，菜品筛选后的更新，以及加载状态的处理。通过后端API获取数据，实现页面交互。

1.看一下要实现的效果

1.1. 点击实现家常菜谱中华菜系各地小吃的tab切换

1.2. 点击各个菜系实现高亮变红选中

1.3 点击工艺口味难度口味下的按钮右侧的菜品会进行筛选菜品会发生变化

1.4 菜品会进行分页可以点击进行上一页下一页的切换

1.5 菜品未显示时会有一个正在加载中的蒙板

1.6 当筛选菜品不足一页将不会进行分页

2. 效果显现方式

使用vue脚手架搭建项目完成效果

使用element组件库

使用vue-router路由

然后就是获取数据操作数据

效果整体图

当菜品出现一页以上显示分页器

当赛选菜品不足一页时不会出现分页器

当菜品未出现时显示loding加载

代码片段

   import {getClassify, getProperty, getMenus} from '@/service/api';

后端写好的api里面储存我们想要的数据

getClassify获取现家常菜谱中华菜系各地小吃这一块的数据

getProperty获取筛选口味这一块的数据

getMenus 拿到商品块的数据

然后就是整个代码块懒得说了直接看

<template>
    <div class="recipe">
        <!-- v-model="activeName" -->
        <!-- 菜谱分类 start -->
        <el-tabs v-model="classifyName" 
                 type="border-card"
                 @tab-click="tabClick"         
        >
            <el-tab-pane
                  v-for="item in classify"//循环遍历头部tab的数据进行渲染
                  :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>