一个关于vue的问题

Question

先贴代码：

<ul>
  <li v-for="(item,key) in goodsList" :key="key">
    <div class="btn-enter-detail" @click="linkToGoods(item)">进入{{item.title}} ></div>
    <div class="item-list-up">
      <span class="classify-item" v-for="(item2,key2) in item.data" v-if="key2<5" :key="key2" @click="linkToGoods(item,item2)">
        {{item2.title}}
      </span>
    </div>
  </li>
</ul>

上面这段，由于v-for和v-if最好不要一起使用，那我该怎么动态计算item.data呢，我想让key2<5时显示那一段，该怎么改写呢？

Answer 1

使用slice

<ul>
  <li v-for="(item,key) in goodsList" :key="key">
    <div class="btn-enter-detail" @click="linkToGoods(item)">进入{{item.title}} ></div>
    <div class="item-list-up">
      <span class="classify-item" v-for="(item2,key2) in item.data.slice(0, 5)" :key="key2" @click="linkToGoods(item,item2)">
        {{item2.title}}
      </span>
    </div>
  </li>
</ul>

更好的灵活性可以把这类处理放到js里面去

goodsListForDisplay = goodsList.forEach(i => {
    i.data = i.data.filter((v, k) => {
        return k < 5;
    })
    // 或者
    i.data = i.data.slice(0, 5)
})

Answer 2

是不要用在同一个元素上，而不是说不可以用；你可以新增一个子元素，把判断条件写在v-for下方子元素中啊

Answer 3

计算属性！！！