vue中如果有多个相同的数据,如何只显示最后一个时间的数据
时间: 2024-02-06 08:09:49 浏览: 25
如果你的数据是数组类型,可以使用 computed 属性对数组进行过滤,获取最后一个时间的数据。具体实现可以参考以下代码:
```
<template>
<ul>
<li v-for="item in lastItems">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [{ time: '2021-03-01', content: '内容1' }, { time: '2021-03-02', content: '内容2' }, { time: '2021-03-03', content: '内容3' }, { time: '2021-03-03', content: '内容4' }]
}
},
computed: {
lastItems() {
let lastTime = '';
let lastItems = [];
this.items.forEach((item) => {
if (lastTime !== item.time) {
lastTime = item.time;
lastItems = [];
}
lastItems.push(item.content);
});
return lastItems;
}
}
}
</script>
```
在上面的代码中,我们使用 computed 属性 lastItems 对 items 数组进行过滤,获取最后一个时间的数据。在遍历数组过程中,我们使用 lastTime 变量记录上一次的时间,如果当前时间和上一次时间不同,就清空 lastItems 数组,并记录新的时间;如果当前时间和上一次时间相同,就将当前数据的内容添加到 lastItems 数组中。最后返回 lastItems 数组即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)