Vue列表循环从指定下标开始

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量2.5k 收藏 5
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43550562/article/details/104846907
版权

最近遇到一个问题，在循环商品列表时，因为数组的第一个是商品的品牌介绍，所以循环时不能直接循环，只能从第二个元素开始。
在这里插入图片描述
方案1：从数据源头更改，后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息，故不好去除。（至于为何品牌信息需要和商品混合在一起，原因是业务问题。以前是给APP上展示的。）

方案2：循环时，列表切割
在这里插入图片描述
方案3：利用v-if，因为它的优先级低于v-for
在这里插入图片描述
方案4：利用method，返回新数组，其实也是切割和第二种类似
在这里插入图片描述
方案5：利用computed
在这里插入图片描述

星期五の夜
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue——列表循环
weixin_54362381的博客
08-21 6215
Vue中的列表渲染 官网文档： https://cn.vuejs.org/v2/guide/list.html. 一、数组循环: 1、v-for中的in和of是一样的效果，二者都可以遍历数组和对象.建议使用v-for-of 更接近迭代器的语法. 2、(item,index) of list中的index代表下表标 3、:key="item.id中key值(唯一的)推荐使用item.id,为了提升性能(尽量别用index做key值) 4、修改数组内容的时候,不能直接通过修改index(list[下标])来修改
Vue：关于列表循环
qq_41096610的博客
11-03 1151
列表渲染v-for v-for用于列表显示的指令，可遍历数组和对象。 遍历数组：v-for/index 遍历对象：v-for/key <div id="app"> <h2>v-for遍历数组</h2> <!--v-for/index--> <ul> <li v-for="(item,index) in persons" :key="index">
Vue番外之循环数组从指定下标开始
二木成林
11-14 2723
其中items为 data() { return { items: [ '唐僧', '孙悟空', '猪八戒', '沙僧', '小白龙' ] } } 第一种方法：循环时，切割列表 <ul> <li v-for="(item, index) in items.slice(1)" :key="index">{{item}}</li> </ul> 第二种方法：利用v-
Vue列表循环从指定下标开始的多种解决方案
10-15
主要介绍了Vue列表循环从指定下标开始的多种方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
js通过指定下标或指定元素进行删除数组的实例
10-20
下标从0开始，表示数组中元素的位置，length属性表示数组中元素的数量。splice方法则是一种用于在任意位置添加或删除元素的数组方法。 删除指定下标数组元素的方法可以通过扩展Array原型来实现。示例代码中定义了一...
vue 循环播放音乐列表 音量控制
soundofsnow的博客
10-28 1998
vue实现循环播放音乐列表，ui自己实现，可以进行歌曲的跳跃，暂停和播放，进度条随时间滚动，拖动进度条改变歌曲时间，自动播放
07vue中的for循环和if
qq_49104166的博客
12-21 295
<div id="app"> <ul> <!--<li v-for="(v,i) in arr"> {{v}} </li>--> <!--当键一样时取出的只有一个--> 键 值 索引 <li v-for="(val,key,i) in obj"> {{val}} {{key}} {{i}} </li> <!
Vue列表展示（循环显示）
lzh的博客
01-30 3602
效果展示 响应式的展示 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{movies}} <ul> <li v-f
Vue本地应用——列表循环，表单元素绑定
qq_45738743的博客
01-14 985
v-forv-on补充v-model。
Vuejs在v-for中,利用index来对第一项添加class的方法
11-26
（1）在v-for中，利用index来对第一项添加class 在CODE上查看代码片派生到我的代码片 <a> index来源于v-for，i表示遍历的数组的元素，index表示索引。 由于index从0开始，因此如果要指定第一项有active这个类，那么就用v-bind:class=”{‘active’:!index}” 第一项原本是false（0），第二项和之后是true（>0），通过逻辑非操作符，让其值反转。 因此，
vue v-for index下标中文网挖的坑
u011120573的博客
04-18 7930
https://cn.vuejs.org/v2/guide/list.html#基本用法 官网把index参数写反了 ul id="example-2"> li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} li>ul> 应该是 li v-fo
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 2552
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
vue项目 双层循环第二层获取不到第一层的下标如何解决
weixin_46390400的博客
07-17 2300
比如这个项目当中分类中的年级学科 通过请求后台接口获取到数据 当点击年级中某个数据或学科中某个数据 需要将当前的下标及id传一下 并加上样式 原效果图如下： 如果 只是将id index 传过去 并在布局用 三元运算符 判断 加样式 并不会出现效果 出现这种问题的原因是 用双层循环 第一层只能用第一层的下标 而第二层 就不会拿到第一层的下标 解决此问题的方法可以 利用深拷贝 object.assign() 说到深拷贝 肯定涉及到浅拷贝 那么他们两个有什么区别呢？ 深拷贝 深拷贝复制变量值，对于非.
Vue.js学习笔记——6.v-for指令的使用
土拨鼠的忧伤的博客
11-24 2133
v-for指令的使用一、v-for的基本使用 一、v-for的基本使用 当我们有一组数据需要进行渲染时，可以使用v-for循环遍历渲染，v-for能够遍历数组或对象。 作用：循环遍历 语法： <element v-for="item in arr"></element> <element v-for="(item,index) in arr"></element> <element v-for="(value,key) in obj"></e
Vue：获取v-for循环中的数组下标、索引及数据
甜鲸鱼的博客
12-05 7038
在Vue中使用v-for取出排行榜数据，并根据排行榜的分类显示对应的排行榜内容。
VUE v-for从指定下标开始遍历数据
LEON_RAY
01-11 6326
例：从数组list第二位（下标为1）开始遍历： <div v-for="(i, index) in list.slice(1, list.length)" :key="index"> <div>{{i}}</div> </div>
vue中v-for的嵌套循环+下标获取
weixin_45781661的博客
10-24 3030
vue中v-for的嵌套循环+下标获取 <template> <div> <div v-for="(item,index1) in data" :key="index1"> <p>{{item.value}}------{{item.label}}</p> <div v-for="(data,in...
vue中for循环怎么指定位置开始循环
09-04
例如，如果要从第3个元素开始循环，你可以这样定义计算属性： ```javascript computed: { slicedArray() { return this.originalArray.slice(2); } } ``` 然后，在模板中使用这个计算属性进行循环渲染： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值