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

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.截图

clipboard.png

clipboard.png

3.问题

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

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

阅读 3.9k
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>

完美解决

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题