美食杰项目效果

大马猴前端

于 2021-10-12 20:02:47 发布

阅读量203

点赞数 1

文章标签： html5 html

本文链接：https://blog.youkuaiyun.com/m0_58225312/article/details/120730787

版权

本文介绍了如何使用ElementUI库在HTML5项目中实现美食分类的点击展示和分页功能。通过监听点击事件显示对应数据，并在数据量大时实现分页，每页显示五条内容。同时，在数据加载过程中，应用了loading遮罩层提高用户体验。

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

实现效果：

点击“炒”,“蒸”等让数据显示出来

当数据多的时候，有分页的效果

每次只显示五条内容,加载的时候有loding遮罩层进行加载

1.点击时让对应的数据显示出来，这里运用到elmentUI

elementUI点击此处跳转具体查看
:info="list"所需要打的数据
:current-page.sync="page"当前页数
@current-change="handlerSelect"点击改变触发

 <el-main class="filter-menus-box" >
               <div class="menu-empty" 
                  v-show="!list.length && !loading"
               >暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>

最低0.47元/天解锁文章