时间戳

首页 > 解决方案 > v-for 中的 VueJs 条件包装器

loops - v-for 中的 VueJs 条件包装器

问题描述

有没有办法在 v-for 循环中制作条件包装器？

所以我有这样的东西

<template>
  <div v-for="(item in items)">
     <span v-if="item.date==newDate">Header</span>
     <div>{{item.text}}</div>
  </div>
</template>

但我需要的是：不确定我可以在代码中描述它。但是每当有新的东西时，我都需要将物品放在包装器中

<section>
  <span> New v-if Span</span>
  <div> item 1</div>
  <div> item 2</div>
  <div> item 3</div>
</section>
<section>
  <span> New v-if Span</span>
  <div> item 4</div>
  <div> item 5</div>
  <div> item 6</div>
</section>

我想我可以改进我的数组，并在我有 v-for 之前检查组，并在 v-for 中执行 v-for 但也许有更酷的方法可以在我不知道的 vue 中做到这一点？

标签： loopsvue.jsconditional-statementswrapperv-for

解决方案

你可以在这里尝试这样的事情，

new Vue({
  el: "#app",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <section v-for="jump in Math.ceil(items.length/3)">
    <span>New v-if Span</span>
    <div v-for="item in items.slice(3*(jump-1), 3*(jump-1)+3)">item {{item}}</div>
  </section>
</div>

推荐阅读