鍍金池/ 問(wèn)答/HTML/ vue循環(huán)的時(shí)候商品與商品不能有后面+按鈕?

vue循環(huán)的時(shí)候商品與商品不能有后面+按鈕?

如果沒(méi)有禮物的話,商品與商品之內(nèi)+按鈕是正常的,但突然后面有了+按鈕,這樣是不應(yīng)該的。如何怎么刪除后面+按鈕呢?jsfiddle:鏈接描述

有問(wèn)題如下:

圖片描述

我想要的效果就是:

圖片描述

JavaScript:

var app = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      name: 'A',
      goods: [{
        name: "goods_a1"
      }],
      gift: [{
        name: "gift_a1",
      }]
    }, {
      id: 2,
      name: 'B',
      goods: [{
        name: "goods_b1"
      }, {
        name: "goods_b2"
      }],
    }, {
      id: 3,
      name: 'C',
      goods: [{
        name: "goods_c1"
      }, {
        name: "goods_c2"
      }, {
        name: "goods_c3"
      }],
      gift: [{
        name: "gift_c1",
      }]
    }]
  }
})

HTML:

<div id="app">
  <div class="mui-row" v-for="item in list">
    <div class="span-title-main">
      <span class="span-title">{{item.name}}</span>
    </div>
    <br>
    <ul>

      <li>
        <div class="mui-col" v-for="items in item.goods">
          <span class="span-name">{{items.name}}</span>
          <div class="addspan">+</div>
        </div>

        <div class="mui-col" v-for="itemss in item.gift">
          <span class="span-name">{{itemss.name}}</span>

        </div>

      </li>
    </ul>
  </div>
</div>
回答
編輯回答
編輯回答
小眼睛

通過(guò)下標(biāo)來(lái)判斷把

2018年2月19日 16:54
編輯回答
墨染殤
<div class="mui-col" v-for="(items, index) in item.goods">
  <span class="span-name">{{items.name}}</span>
  <div class="addspan" v-if="index < (item.goods.length-1)">+</div>
</div>
2017年8月18日 18:51