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.条件表达式。
缺点是显示的
<li>
数量还是有多余的2.
v-if
完美解决