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.条件表达式。

{{ i < item.length ? item[i] : ''}}

缺点是显示的<li>数量还是有多余的

2.v-if

<ul>
  <li v-for="i in 4" v-if="i<item.length">
    {{ item[i] }}
  </li></ul>