代码之家 › 专栏 › 技术社区 › user3348410

v-用于按日期分组的渲染项

vue.js arrays javascript

user3348410 · 技术社区 · 7 年前

如何在Vue.js中按日期呈现包含组的项目?

例如:我有一个类似的动态数据数组,它将来自以下类型的api:

items: [
    {
        name: 'a',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'b',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'c',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'd',
        created: '2019-02-04T02:31:46.3485544'
    },
    {
        name: 'd',
        created: '2019-02-04T02:31:46.3485544'
    }
]

我想这样呈现列表:

<p> items created today </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created yesterday </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created February 2 </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created February 4 </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

有可能吗?我将收到这些数据总是从api,所以它将是动态数据,这意味着我将需要标题也得到动态,我的意思是,例如:项目创建2月4日。。。2月3日创建的项目。。今天创建的项目等。

2 回复 | 直到 5 年前

Boussadjra Brahim 7 年前

您可以创建计算属性以按天对数据进行分组:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          name: 'a',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'b',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'c',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'd',
          created: '2019-02-04T02:31:46.3485544'
        },
        {
          name: 'd',
          created: '2019-02-04T02:31:46.3485544'
        }
      ]
    }
  },
  computed: {
    groupByDay() {
      let g = {};
      this.items.forEach(item => {
        let d = item.created.substring(0, 10);
        if (g[d]) {
          g[d].push(item.name);
        } else {
          g[d] = [];
          g[d].push(item.name);
        }
      });

      return g;

    }
  }

});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
   <div v-for="(item,key,index) in  groupByDay">
     <h5>items created : {{key}}</h5>
     <ul>
     <li v-for="name in item">{{name}}</li>
     </ul>
   
   </div>
</div>

Adam 7 年前

基本上,您需要获得数组数组,以便迭代这些项。

如果API能够返回为您分组的数据,那么您就可以对其进行迭代,这将是非常棒的。

https://date-fns.org/ 用于确定项目应转到哪个组。

推荐文章

Megrez7 · C#ToArray转换合并为一行,导致数组元素更改

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

Anka HanÄ±m · 关于结构和动态数组地址的问题

1 年前

Swapnil Supekar · 将二维阵列转换为一维阵列,并将一维阵列粘贴到另一张图纸上

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

MaSc. H. · 大小与阵列大小

1 年前

Geremia · 2D NumPy数组+1D数组?

1 年前

MARTIN · 交换第一个和最后一个单词,反转所有中间的字符

1 年前

Paul Williams · 迭代数组时输出有问题

1 年前

Oliver Morgan · PostgreSQL错误:无法累积不同维度的数组

1 年前