最近遇到一個(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！