vue循环的时候商品与商品不能有后面+按钮？

Question

如果没有礼物的话，商品与商品之内+按钮是正常的，但突然后面有了+按钮，这样是不应该的。如何怎么删除后面+按钮呢？jsfiddle：链接描述

有问题如下：

我想要的效果就是：

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>

Answer 1

https://jsfiddle.net/wLtopdv3/7/

看

Answer 2

<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>

Answer 3

通过下标来判断把