Vue列表循環(huán)從指定下標開始的多種解決方案
更新時間：2020年04月08日 09:04:02 作者：Andy__Zhanglv-1
這篇文章主要介紹了Vue列表循環(huán)從指定下標開始的多種方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
最近遇到一個問題，在循環(huán)商品列表時，因為數(shù)組的第一個是商品的品牌介紹，所以循環(huán)時不能直接循環(huán)，只能從第二個元素開始。
方案1：從數(shù)據(jù)源頭更改，后端直接在列表里去除第一個數(shù)組元素。但前端還是需要在別的地方展示品牌信息，故不好去除。（至于為何品牌信息需要和商品混合在一起，原因是業(yè)務問題。以前是給APP上展示的。） 方案2：循環(huán)時，列表切割
方案3：利用v-if，因為它的優(yōu)先級低于v-for
方案4：利用method，返回新數(shù)組，其實也是切割和第二種類似
方案5：利用computed
ps：下面看下vue的 v-for獲取循環(huán)的下標
vue框架中可以使用 v-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染,那么如何在使用v-for循環(huán)的時候獲取數(shù)組的下標呢？
語法：<li v-for="(arr,index) in arr">{{arr.text}}</li> /*index表示當前數(shù)組的下標*/
<ul id="app">
<li v-for="(arr,index) in arr">
{{index}}：{{arr.text}}
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
arr: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛項目' }
]
}
})
</script>
總結
到此這篇關于Vue列表循環(huán)從指定下標開始的多種實現(xiàn)方法的文章就介紹到這了,更多相關Vue列表循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實踐---根據(jù)不同環(huán)境,自動轉換請求的url地址操作
這篇文章主要介紹了vue實踐---根據(jù)不同環(huán)境,自動轉換請求的url地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例
本篇文章主要介紹了vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue全局使用axios的方法實例詳解，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章交詳細的給大家介紹了vue組件中slot的用法，主要是讓組件的可擴展性更強，具體內(nèi)容詳情大家參考下本文2018-01-01
這篇文章主要介紹了vue實現(xiàn)父組件獲取子組件的方法或屬性值詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
VueUse提供了一個豐富且強大的Hooks庫,可以幫助開發(fā)者快速實現(xiàn)各種功能,提高開發(fā)效率,本文來詳細的介紹一下,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)3D柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標文件轉換為Vue組件,本文主要介紹了vue3+vite項目中顯示SVG圖片的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-02-02
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項目開發(fā),客戶覺得地圖上的文字標注太多了,要求地圖上只顯示省市等主要城市的標注,這篇文章主要給大家介紹了關于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue.js實現(xiàn)的計算器功能,結合完整實例形式分析了vue.js響應鼠標事件實現(xiàn)基本的數(shù)值運算相關操作技巧,可實現(xiàn)四則運算及乘方、開方等功能,需要的朋友可以參考下2018-07-07