vue使用v-for循環(huán)獲取數(shù)組最后一項
更新時間：2024年03月20日 10:24:05 作者：傲太白
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用v-for循環(huán)獲取數(shù)組最后一項
<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 數(shù)組的最后一個元素的索引 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 中的最后一個元素，如果不是最后一個元素，則顯示 | 分隔符。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇解決Vue打包上線之后部分CSS不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了如何利用vite快速搭建vue3項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應式數(shù)據(jù)并且修改賦值全部內容，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue.js 表單校驗插件的相關資料,需要的朋友可以參考下2016-08-08
下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue關于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題
這篇文章主要介紹了vue關于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了使用vite構建vue3項目的方法步驟，vite支持性肯定比傳統(tǒng)的打包工具好，下面我們就來介紹一下使用vite構建vue3項目，感興趣的可以參考一下2023-05-05
Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn)
這篇文章主要介紹了Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
vue?el-table實現(xiàn)動態(tài)添加行和列具體代碼
最近遇到一個動態(tài)增加行和列的需求,所以這里給大家總結下,這篇文章主要給大家介紹了關于vue?el-table實現(xiàn)動態(tài)添加行和列的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了結合康熙選秀講解vue虛擬列表的原理使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07