javascript - When traversing Vue's v-for, can the index value be controlled at a maximum value and output back and forth?

Question

Regarding vue's v-for traversal, can the index index value be controlled to cycle back and forth at a maximum value?

---

Attach the jsfiddle code address, click to go to jsfiddle preview code>>

Code:

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

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

---

For example, if you want the maximum index value of the loop to be 2, the expected result is as follows:

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

Answer 1

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

Use % to find the remainder?

Update:
=.= changed to 3 to prevent misleading. The point is %

Answer 2

It should be index%3

Answer 3

I think we can use filter to process the index