溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue列表循環(huán)從指定下標開始的多種解決方案

發(fā)布時間:2020-09-24 01:00:44 來源:腳本之家 閱讀:832 作者:Andy__Zhanglv-1 欄目:web開發(fā)

最近遇到一個問題,在循環(huán)商品列表時,因為數(shù)組的第一個是商品的品牌介紹,所以循環(huán)時不能直接循環(huán),只能從第二個元素開始。

Vue列表循環(huán)從指定下標開始的多種解決方案 

方案1:從數(shù)據(jù)源頭更改,后端直接在列表里去除第一個數(shù)組元素。但前端還是需要在別的地方展示品牌信息,故不好去除。(至于為何品牌信息需要和商品混合在一起,原因是業(yè)務問題。以前是給APP上展示的。) 方案2:循環(huán)時,列表切割

Vue列表循環(huán)從指定下標開始的多種解決方案

方案3:利用v-if,因為它的優(yōu)先級低于v-for

Vue列表循環(huán)從指定下標開始的多種解決方案

方案4:利用method,返回新數(shù)組,其實也是切割和第二種類似

Vue列表循環(huán)從指定下標開始的多種解決方案

方案5:利用computed

Vue列表循環(huán)從指定下標開始的多種解決方案

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>

總結(jié)

到此這篇關于Vue列表循環(huán)從指定下標開始的多種實現(xiàn)方法的文章就介紹到這了,更多相關Vue列表循環(huán)內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持億速云!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI