Vue列表循环从指定下标开始的多种解决方案

最近遇到一个问题，在循环商品列表时，因为数组的第一个是商品的品牌介绍，所以循环时不能直接循环，只能从第二个元素开始。

方案1：从数据源头更改，后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息，故不好去除。（至于为何品牌信息需要和商品混合在一起，原因是业务问题。以前是给APP上展示的。） 方案2：循环时，列表切割

方案3：利用v-if，因为它的优先级低于v-for

方案4：利用method，返回新数组，其实也是切割和第二种类似

方案5：利用computed

ps：下面看下vue的 v-for获取循环的下标

vue框架中可以使用 v-for 指令可以绑定数组的数据来渲染,那么如何在使用v-for循环的时候获取数组的下标呢？

语法：<li v-for="(arr,index) in arr">{{arr.text}}</li>      /*index表示当前数组的下标*/

 <ul id="app">
 <li v-for="(arr,index) in arr">
 {{index}}：{{arr.text}}
 </li>
 </ul>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script type="text/javascript">
 var app = new Vue({
 el:"#app",
 data:{
 arr: [
   { text: '学习 JavaScript' },
   { text: '学习 Vue' },
   { text: '整个牛项目' }
  ]
 }
 })
 </script>

总结

到此这篇关于Vue列表循环从指定下标开始的多种实现方法的文章就介绍到这了,更多相关Vue列表循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue2.0 可折叠列表 v-for循环展示的实例

    先上一张效果图: 以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠. 今天在这个项目 https://github.com/IFmiss/vue-music上看到操作很简单,并没有如此复杂.赶紧记录一下: 折叠列表单独做一个组件,图标是用的iconfont中生成的css链接:myMusicSheetList.vue <template> <div class="sheet-list"> <div class

  • Vue中控制v-for循环次数的实现方法

    在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i

  • vue 取出v-for循环中的index值实例

    一开始接触到vue的for循环就觉得贼好用,重复性的东西再也不用ctrl C+ctrl V了好吗.不仅代码可复用了,而且提高了代码可读性.减轻了工作量,更重要的是写代码都有成就感了. 贴出个小小例子: template <ul v-for="(item,index) in pcState"> <li>{{item.name}}</li> <li>{{item.state}}</li> <li>{{item.ip}}

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    一. 业务场景: 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • 使用Vue中 v-for循环列表控制按钮隐藏显示功能

    v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. - 实现效果如图 需求描述: 第一个显示蓝色按钮,代表数据最终状态:其余按钮为灰色,显示数据流转记录. 返回的数据类型 前端页面代码 <div class="leftProcessBox"> <div class="leftProcess" v-for="(l

  • Vue用v-for给循环标签自身属性添加属性值的方法

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下:  修改内容为 l

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

随机推荐