javascript - 关于vue的v-for遍历的时候，index索引值能否控制在一个最大值来回输出？

问题描述

问 题

关于vue的v-for遍历的时候，index索引值能否控制在一个最大值来回循环？

---

附上jsfiddle代码地址,点击前往jsfiddle预览代码>>

代码：

<script type="text/javascript">
var vm=new Vue({
    el:'.list',
    data:{
        list:['a','b','c','d','e','f','g']
    },
});
</script>

<div class="list">
<ul>
  <li v-for="(item,index) in list">
    {{index}}<br />{{item}}
  </li>
</ul>
</div>

---

比如希望来回循环的索引值最大是2,期望得到的结果如下:

<div clss="list">
    0
    a
</div>
<div clss="list">
    1
    b
</div>
<div clss="list">
    2
    c
</div>
<div clss="list">
    0
    d
</div>
<div clss="list">
    1
    e
</div>
<div clss="list">
    2
    f
</div>
<div clss="list">
    0
    g
</div>

解决方案

<div class="list">
<ul>
  <li v-for="(item,index) in list">
    {{index%3}}<br />{{item}}
  </li>
</ul>
</div>

用 % 求余数？

更新：
=.= 防止误导，改成 3 了。重点是 %

这篇关于javascript - 关于vue的v-for遍历的时候，index索引值能否控制在一个最大值来回输出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！