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打包上线之后部分CSS不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了如何利用vite快速搭建vue3项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)
这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下2016-08-08
下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue关于接口请求数据过大导致浏览器崩溃的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了使用vite构建vue3项目的方法步骤，vite支持性肯定比传统的打包工具好，下面我们就来介绍一下使用vite构建vue3项目，感兴趣的可以参考一下2023-05-05
这篇文章主要介绍了Vue中使用matomo进行访问流量统计的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最近遇到一个动态增加行和列的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue el-table实现动态添加行和列的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了结合康熙选秀讲解vue虚拟列表的原理使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论