vue使用v-for循环获取数组最后一项
更新时间：2024年03月20日 10:24:05 作者：傲太白
这篇文章主要介绍了vue使用v-for循环获取数组最后一项问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用v-for循环获取数组最后一项
<span v-for="(item,i) in list" >
<i style="display: none" v-if="i!=0">/</i>
<i >{{item}}</i>
<br/>
</span>
假设我们不知道list的大小，想在用/分割，但是最后一个却不需要，我们可以使用以上做法
<span v-for="(item,i) in list" >
<i >{{item}}</i>
<i style="display: none" v-if="i!=list.length-1">/</i>
<br/>
</span>
假设我们知道list的大小，想在用/分割，但是最后一个却不需要，我们可以使用以上做法
vue v-for 判断是否是最后一个
在Vue中，可以使用 $index 和 $last 属性来判断 v-for 中的元素是否是最后一个。
例如：
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
<span v-if="index !== items.length - 1">|</span> <!-- 判断是否是最后一个 -->
</li>
</ul>上面的代码中，v-if 判断当前元素的索引 index 是否等于 items 数组的最后一个元素的索引 items.length - 1，如果不是最后一个元素，则显示 | 分隔符。
另外，还可以使用 $last 属性来判断是否是最后一个元素
例如：
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
<span v-if="!$last">|</span> <!-- 判断是否是最后一个 -->
</li>
</ul>上面的代码中，v-if 判断当前元素是否为 v-for 中的最后一个元素，如果不是最后一个元素，则显示 | 分隔符。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue下使用fullcalendar及简单案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本文主要介绍了vue3生成随机密码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
Vue实现获取后端接口API代码片段(已封装Service方法名)
Vue实现获取后端接口API代码片段(已封装Service方法名)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了VUE实现吸底按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了Vue3中其他的Composition API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了深入解读VUE中的异步渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了关于ElementPlus中的表单验证,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要给大家分享介绍了关于动态Axios的配置步骤，文中通过示例代码介绍的非常详细，通过这个教程大家可以很方便的实现动态Axios的配置，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要为大家详细介绍了vue+springboot实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
最新评论