【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>
相关推荐
行云流水6267 小时前
uniapp pinia实现数据持久化插件
前端·javascript·uni-app
zhangyao9403307 小时前
uniapp动态修改 顶部导航栏标题和右侧按钮权限显示隐藏
前端·javascript·uni-app
福尔摩斯张9 小时前
Axios源码深度解析:前端请求库设计精髓
c语言·开发语言·前端·数据结构·游戏·排序算法
aiguangyuan9 小时前
React 中什么是可中断更新?
javascript·react·前端开发
李牧九丶9 小时前
从零学算法1334
前端·算法
1***s6329 小时前
JavaScript微服务
javascript·微服务·devops
周周爱喝粥呀9 小时前
UI设计原则和Nielsen 的 10 条可用性原则
前端·ui
小云朵爱编程10 小时前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
前端大卫10 小时前
CSS 属性值 initial、unset 和 revert 的解析
前端