vuejs数组越界和v-if的使用

Question

1.代码

需要访问一个数组中的部分元素，但是可能越界，e.g.:

<template>
  <ul>
    <li v-for="i in num">   <!-- num=4, 而item只有3个元素,会越界-->
      {{item[i]}}
    </li>
  </ul></template><script>export default {
  data () {    return {      num: 4,      item: ['a', 'b', 'c']
    }    
  }
}</script>

这里贴出的代码是简化过的。实际中可能要处理这样的情况：遍历数组中从某一项开始，到另外一项结束，因而直接遍历原数组是不行的，比如：数组有10项，每次遍历3项，下一次遍历是接着上一次遍历的（分段遍历整个数组），那么第4段分段遍历就会遭遇越界的情况。

2.截图

3.问题

截图中可以看到，第四个<li>还是有占位的，但是并没有提示说数组越界。我这种写法真的没有问题吗？是vue自身做了数组越界检查吗？还是说会有潜在的问题？

是否能通过v-if来判断i是否小于item.length?

Answer 1

1.条件表达式。{{&nbsp;i&nbsp;<&nbsp;item.length&nbsp;?&nbsp;item[i]&nbsp;:&nbsp;''}}缺点是显示的<li>数量还是有多余的2.v-if<ul> &nbsp;&nbsp;<li&nbsp;v-for="i&nbsp;in&nbsp;4"&nbsp;v-if="i<item.length"> &nbsp;&nbsp;&nbsp;&nbsp;{{&nbsp;item[i]&nbsp;}} &nbsp;&nbsp;</li></ul>