一个关于vue的问题

vvhl
  • 636

先贴代码:

<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时显示那一段,该怎么改写呢?

回复
阅读 801
3 个回答

使用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)
})

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

计算属性!!!

你知道吗?

宣传栏