【vue】v-for只显示前几个数据,超出显示查看更多

v-for只显示前几个数据,超出显示查看更多

如图

复制代码
<div v-for="(item,index) in list.slice(0,3)" :key="index">
    <div class="degreeNo" :class="index=='0'?'noOne':index=='1'?'noTwo':index=='2'?'noThree':''">
NO{{index+1}}:
    </div>
    <div class="degreeName">{{item.name}}</div>
</div>
<div class="moreBtn" v-if="list && list.length>3">
    <el-button type="text" @click="checkMore">查看更多</el-button>

</div>
相关推荐
LinDon_7 小时前
【vue2form表单中的动态表单校验】
前端·javascript·vue.js
一水鉴天7 小时前
整体设计 之28 整体设计 架构表表述总表的 完整程序(之27 的Q268 )(codebuddy)
java·前端·javascript
DsirNg7 小时前
使用 SSE 单向推送实现 系统通知功能
前端·javascript
IT_陈寒8 小时前
SpringBoot 3.2 实战:用这5个新特性让你的API性能提升40%
前端·人工智能·后端
宋军涛8 小时前
重操旧业,继续码农生活,温故vue moment类库和new Date()
vue.js·生活
霍理迪8 小时前
HTML初相识
前端·html
恋猫de小郭8 小时前
Android 宣布 Runtime 编译速度史诗级提升:在编译时间上优化了 18%
android·前端·flutter
莓莓儿~8 小时前
Next.js 14 App Router数据获取开发手册
开发语言·前端·javascript
文心快码BaiduComate8 小时前
AI Coding老跑偏?用Comate Rules功能,少走十年弯路!
前端·架构·前端框架
PineappleCoder8 小时前
WebP/AVIF 有多香?比 JPEG 小 30%,<picture>标签完美解决兼容性
前端·面试·性能优化