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

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>
                  
                </div >
            </el-tab-pane>
            <!-- <el-tab-pane label="菜系2">
                <div class="recipe-link">
                    <router-link :to="{