鍍金池/ 問答/HTML/ vue 循環(huán)數(shù)據(jù)中插入一張圖片

vue 循環(huán)數(shù)據(jù)中插入一張圖片

clipboard.png
商品數(shù)據(jù)isNew是否是新品，我要在新款和老款中間加一張圖片作為分隔，數(shù)據(jù)在一個list里，后臺先給的是isNew為1
我要怎樣才能在一個for循環(huán)中插入一張圖片

  "findGoodsList":[
            {
               
                "isNew":1,
                "sellingPoints":"Nike 耐克運(yùn)動 AS W NSW CREW ARCHIVE 2017 秋季 休閑系列 服裝 衛(wèi)衣 女 女子 成人 857089-133",
                "goodsPrice":399,
                "sharePrice":319.2,
                "rebatePrice":39.9,
                "goodsId":"0d2420561a1b4360ad5f6a73067f0510",
                "stockNum":1,
                "labelName":"NEW BALANCE",
                "activeType":1,
                "sizeName":"A"
            },
         }

我現(xiàn)在的實(shí)現(xiàn)方法是寫了兩個for然后通過v-if ="isNew==1"去判斷，但是覺得這樣不友好大家給個思路，不勝感激

 <ul class="product-list">
          
            <li class="product-item" @click="$router.push({path: '/product', query:{id: item.productId}})" v-for="(item,index) in proData" **v-if="item.isNew==1"**
              :key="index">
              <div class="item-posre">
                <img v-lazy="item.activityImg" alt="">
              </div>
              <div class="item-product-text">{{item.isNew}}{{item.sellingPoints}}</div>
              <p class="original-price">吊牌價：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
              <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                <button type="button" class="jx-btn" v-if="item.stockNum>0">立即購買</button>
                <button type="button" class="jx-btn none" v-else> 暫時無貨  </button>
              </p>

              <!--<div class="size">尺碼：{{item.sizeName}}</div>-->
              <!--<div class="size">尺碼：{{item.sizeName}}</div>-->
            </li>
            **<div v-if="bannerShow"><img style="width:100%" v-lazy="activity.bannerImg2" alt=""></div>**
            <li class="product-item" @click="$router.push({path: '/product', query:{id: item.productId}})" v-for="(item,index) in proData" **v-if="item.isNew==0"**
              :key="index">
              <div class="item-posre">
                <img v-lazy="item.activityImg" alt="">
              </div>
              <div class="item-product-text">   {{item.isNew}}{{item.sellingPoints}}</div>
              <p class="original-price">吊牌價：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
              <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                <button type="button" class="jx-btn" v-if="item.stockNum>0">立即購買</button>
                <button type="button" class="jx-btn none" v-else> 暫時無貨  </button>
              </p>
            </li>
          </ul>
回答
編輯回答
影魅

computed,數(shù)據(jù)分一下吧

2017年11月17日 04:19
編輯回答
執(zhí)念

嗯，出來的數(shù)據(jù)，直接就分成兩個list。然后就是一個上面，一個下面咯。。。

2017年2月26日 06:58
編輯回答
純妹

最后的解決辦法是請求數(shù)據(jù)后先循環(huán)一個分頁請求的數(shù)據(jù)插入一個對象，在將數(shù)據(jù)concat到proData

      list.forEach((item, index) => {
            // 先判斷index>0 后判斷index-1
            if (item.isNew === 0 && index > 0 && list[index - 1].isNew === 1) {
              list.splice(index, 0, {
                'banner': true
              })
            }
          })

然后再數(shù)據(jù)展示的時候判斷item.banner，如果是ture就顯示圖片數(shù)據(jù)，結(jié)合了樓上兩位給的思路，萬分感謝

 <ul class="product-list">
           
            <li :class="{'product-item':!item.banner}" v-for="(item,index) in proData" :key="index">
              <div v-if="item.banner" style="margin-right:-10px"><img style="width:100%;" v-lazy="activity.bannerImg2" alt=""></div>
              <div v-else @click="$router.push({path: '/product', query:{id: item.productId}})">
                <div class="item-posre">
                  <img v-lazy="item.activityImg" alt="">
                </div>
                <div class="item-product-text">{{item.sellingPoints}}</div>
                <p class="original-price">吊牌價：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
                <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                  <button type="button" class="jx-btn" v-if="item.stockNum>0">立即購買</button>
                  <button type="button" class="jx-btn none" v-else> 暫時無貨  </button>
                </p>
              </div>
              <!--<div class="size">尺碼：{{item.sizeName}}</div>-->
              <!--<div class="size">尺碼：{{item.sizeName}}</div>-->
            </li>
          </ul>
2017年7月11日 05:03
編輯回答
舊螢火
var arr = [
    {new:1,b:2},
    {new:1,c:2},
    {new:2,b:1}
];
//new：1為新 2為舊，找new ==2的下標(biāo)

var j = 0;
arr.forEach(function(item,i,arr1){
    if(arr1[i].new == 2){
        j = i;
    }
})

然后splice在 arr[j-1]添加一條，即為第一個舊的之前添加。

2017年8月18日 18:13