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

3.问题

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

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

解决方案

解决了。两种办法：

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>

完美解决

这篇关于javascript - vuejs数组越界和v-if的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！