Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案
最近遇到一個(gè)問題，在循環(huán)商品列表時(shí)，因?yàn)閿?shù)組的第一個(gè)是商品的品牌介紹，所以循環(huán)時(shí)不能直接循環(huán)，只能從第二個(gè)元素開始。
方案1：從數(shù)據(jù)源頭更改，后端直接在列表里去除第一個(gè)數(shù)組元素。但前端還是需要在別的地方展示品牌信息，故不好去除。（至于為何品牌信息需要和商品混合在一起，原因是業(yè)務(wù)問題。以前是給APP上展示的。） 方案2：循環(huán)時(shí)，列表切割
方案3：利用v-if，因?yàn)樗膬?yōu)先級(jí)低于v-for
方案4：利用method，返回新數(shù)組，其實(shí)也是切割和第二種類似
方案5：利用computed
ps：下面看下vue的 v-for獲取循環(huán)的下標(biāo)
vue框架中可以使用 v-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染,那么如何在使用v-for循環(huán)的時(shí)候獲取數(shù)組的下標(biāo)呢？
語法：<li v-for="(arr,index) in arr">{{arr.text}}</li> /*index表示當(dāng)前數(shù)組的下標(biāo)*/
<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: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個(gè)牛項(xiàng)目' }
]
}
})
</script>
總結(jié)
到此這篇關(guān)于Vue列表循環(huán)從指定下標(biāo)開始的多種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue列表循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?Router是Vue.js官方的路由管理器,它主要用于單頁面應(yīng)用程序中,幫助解決頁面導(dǎo)航、組件復(fù)用等問題,下面我們就來看看vue3中路由寫法與傳參方式吧2024-11-11
vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
Vue.js中一個(gè)很重要的知識(shí)點(diǎn)是組件通信,不管是業(yè)務(wù)類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關(guān)于Vue3常用的通訊方式的相關(guān)資料,需要的朋友可以參考下2022-05-05
本文主要介紹了element關(guān)于table拖拽排序問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue3-ace-editor如何配置語法問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了Vue之過濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11