Question

我在任何地方都找不到解决问题的方法，也无法解决。我有这样的div

<div class="columns">
  <div class="column">
   {looping content here}
  </div>
</div

数据是这样的：

{
   title: 'blabla'
   body: 'blabla'
   msg: 'blabla"
}

出于响应目的，我需要并排最多3列，然后启动另一个将在下面堆叠列的列容器。因此，在columns容器内设置了3列div，然后在其中创建了3列div的另一个columns div，直到数组为空。

我尝试过计算计数属性，但是不知道如何在v-for中对其进行迭代。还尝试了v-if，但没有按计划进行：（

在v-for中甚至有可能吗？我不知道该采取什么诚实的态度。

Answer 1

如果数据格式正确，则可以嵌套v-for循环。
例如，一个对象数组（对于第一个v-for）（第二个循环）：

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        {
          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
        },
        {
          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'
        }
      ]
    }
  }
})

.columns {
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: space-around;
  width: 50%;
}

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns" v-for="item in items">
    <div class="column" v-for="(value, key) in item">
      <div>{{ value }}</div>
    </div>
  </div>
</div>

Answer 2

为什么不只是将每列插入单个列容器中，然后使用CSS每3列换行到新行。这样做的另一个好处是，您可以调整媒体查询在每一行中显示的列数。

尝试全屏运行下面的代码段，然后将浏览器的宽度调整为小于576px，以查看响应列。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, OptionsValidator optionsValidator)
{
    // validate options explicitly
    optionsValidator.Validate();

    // …
    app.UseMvc();
}

new Vue({
  el: '#app',
  data () {
    return {
      columns: [
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        }
      ]
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  box-sizing: border-box;
  padding: 1em;
  width: 33.3%;
}

/* on devices smaller than 576px, stack columns */
@media (max-width: 576px) {
  .column {
    width: 100%;
  }
}

v-for在{x}迭代中渲染或不渲染<div>

2 个答案: