搜尋

首頁  >  問答  >  主體

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

例如希望來回循環的索引值最大是2,期望得到的結果如下:

#
<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>
typechotypecho2733 天前1245

全部回覆(3)我來回復

  • 滿天的星座

    滿天的星座2017-07-05 11:04:34

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

    用 % 求餘數?

    更新:
    =.= 防止誤導,改成 3 了。重點是 %

    回覆
    0
  • PHP中文网

    PHP中文网2017-07-05 11:04:34

    應該index%3的吧

    回覆
    0
  • 三叔

    三叔2017-07-05 11:04:34

    我覺得可以用filter來處理index

    回覆
    0
  • 取消回覆