最近遇到一個問題，在迴圈商品列表時，因為陣列的第一個是商品的品牌介紹，所以迴圈時不能直接迴圈，只能從第二個元素開始。

方案1：從資料來源頭更改，後端直接在列表裡去除第一個陣列元素。但前端還是需要在別的地方展示品牌資訊，故不好去除。（至於為何品牌資訊需要和商品混合在一起，原因是業務問題。以前是給APP上展示的。） 方案2：迴圈時，列表切割

方案3：利用v-if，因為它的優先順序低於v-for

方案4：利用method，返回新陣列，其實也是切割和第二種類似

方案5：利用computed

ps：下面看下vue的 v-for獲取迴圈的下標

vue框架中可以使用 v-for 指令可以繫結陣列的資料來渲染,那麼如何在使用v-for迴圈的時候獲取陣列的下標呢？

語法：<li v-for="(arr,index) in arr">{{arr.text}}</li> /*index表示當前陣列的下標*/

 <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列表迴圈從指定下標開始的多種實現方法的文章就介紹到這了,更多相關Vue列表迴圈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！