vue只展示列表的前两条数据

已于 2022-06-17 18:04:10 修改
阅读量1.0k 收藏 2
点赞数 4
文章标签： vue 前端
于 2022-06-13 15:00:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45349764/article/details/125260158
版权

效果图

这是展示全部列表数据的样子

这是设置只显示列表前两条数据的样子

代码

在列表循环v-for最后加上.slice(0,2)，得到的就是列表中的前两条数据

昙花一现可倾城f
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中二维数组有七条数据，在页面渲染的时候只取前两项（已解决）
攻城狮很忙的博客
09-03 791
item.rowsObject 就是数据返回之后的 第二层数组
v-for只显示前两条数据
qq_43405603的博客
10-16 773
Vue过长文本单行展示，过长部分省略，拓展多行展示
qq_39483453的博客
06-30 2524
目录需求解决效果拓展多行 需求 如下图，导航树结点内文本过长导致展示文本重叠。 需要各行仅展示前本部分文本。 解决 在结点的样式中添加如下部分： display: block; /* 需要 */ white-space: nowrap; /* 过长部分不换行 */ text-overflow: ellipsis; /* 过长部分展示省略号 */ overflow: hidden; /* 隐藏过长部分 */ 若出现display的设置被其他地方设置的样式覆盖，可在其后添加：! important 效果
uniapp-for循环只显示前3条数据，一条代码实现
weixin_45149750的博客
09-19 1954
uniapp-for循环只显示前3条数据，一条代码实现
vue限制显示字符为20个，多余为...
qq_38507112的博客
10-25 7033
filterFun: function (value) { if(value&& value.length > 20) { value= value.substring(0,20)+ ‘…’; } return value; }
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的   根据项目需求，这需要一页可以看到全部数据，所以我选择了第二中方式 那么第二种方式要怎么去实现呢？ 在了解它的原理前，你...
Vue 自适应高度表格的实现方法
11-20
本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用vue-element-admin 项目进行前台的开发，该框架集成了很多功能，特别适合对 Vue 很陌生的新手，公司项目组成员接受程度普遍较高。...
vuejs数据超出单行显示更多，点击展开剩余数据实例
10-17
主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
vue+elementui 实现transfer组件，对里面增加一点功能，修改一些问题
12-27
对原先的功能做了一些改进，以及增加一点额外需求功能
vue.js 之 vue 列表渲染 中限制条数（笔记）
acyj68799的博客
05-13 1140
怎么限制只渲染2条数据呢？ <ul> <li v-for="i in list" v-text="i"></li> </ul> list: ['a','b','c','d'] 解决方案1: <ul> <li v-for="i in list.slice(0, 2)" v...
vue2表格的某一列处理
最新发布
weixin_54526156的博客
08-09 60
前端处理表格的某一列数据
Vue | 利用slice()方法实现分页器
Albirostris
08-18 1155
vue
Vue利用slice()方法实现分页操作
pleaseprintf的博客
02-23 3712
Vue利用slice()方法实现分页操作
Vue基础-2
qq_40338278的博客
10-11 258
Vue基础-2 1.表单修饰符 .number 转换为数值**(表单中输入的值为字符串类型，number可将其转换为数字类型)** .trim 自动过滤用户输入的首尾空白字符，只能去掉首尾的 不能去除中间的空格 .lazy 将input事件切换成change事件（在表单校验时使用） 在失去焦点 或者 按下回车键时才更新 <!-- 自动将用户的输入值转为数值类型 --> <input v-model.number="age" type="number"> <!--自动过滤用
Vue element ui 操作表格状态，后台值为1显示某某，2显示某某
qq_40630924的博客
03-18 9413
vue+element-ui根据后台获取的值为1、2、3等类型时候进行中文显示 有时候后台返回的状态不是中文的时候而是1、2、3这种类型的时候这时候不能直接根据prop属性直接进行显示，需要根据这些类型进行判断从而显示我们想要的中文时，比如表格中的某列需要显示中文的时候： <template> <el-table :data="tableData" style...
使用vue获取数据时，共有7条数据，但是我只需要前两条，怎么处理
weixin_40667613的博客
02-10 4622
https://bbs.csdn.net/topics/392289820?page=1 <ul id="example"> <li v-for="(item, index) in items" v-if='index<2'> {{ index }} - {{ item.message }} </li> </ul>
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
热门推荐
wocwin的博客
04-24 1万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
头条新闻（Vue实战项目）-首页1
Zwq8023520的博客
08-23 1134
vue实战项目 头条新闻 网络请求练习
vue中根据数据里面的开始时间和结束时间在页面上展示一条长横线
05-27
你可以使用 Vue 中的 `v-for` 指令和 `style` 绑定来根据数据里的开始时间和结束时间展示一条长横线。假设你的数据如下： ```javascript data: { lines: [ {id: 1, start: '09:00', end: '12:00'}, {id: 2, start: '13:00', end: '15:00'}, {id: 3, start: '17:00', end: '18:00'} ] } ``` 其中，每个对象表示一条线，包括 id、start 和 end 三个属性。接下来，你可以在模板中使用 `v-for` 指令遍历数据，为每条线设置样式，并展示出来。代码如下： ```html <div v-for="line in lines" :key="line.id" class="line" :style="{ left: getLeft(line.start), width: getWidth(line.start, line.end) }"></div> ``` 在这个例子中，我们为每条线创建一个 `div` 元素，并使用 `v-for` 指令遍历数据中的每个对象。在 `div` 元素上使用 `class` 属性设置样式，并使用 `style` 绑定动态设置元素的样式。具体来说，我们通过 `getLeft` 方法获取线条的起点位置，通过 `getWidth` 方法获取线条的长度，然后将这两个值设置为 `left` 和 `width` 样式。这里的 `getLeft` 和 `getWidth` 方法需要你自己实现，可以使用 JavaScript 中的 Date 对象来处理时间，计算出相应的位置和长度。 最后，你需要在 CSS 中设置 `.line` 类的样式，包括高度、边框、背景颜色等。代码如下： ```css .line { position: absolute; top: 50px; height: 2px; border-radius: 2px; background-color: #000; } ``` 在这个例子中，我们将每条线的高度设置为 2px，背景颜色为黑色，边框为圆角矩形，位置为绝对定位。你可以根据自己的需要来调整这些样式，以展示出符合你要求的长横线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值