uniapp vue3 有数组列表list 时间戳是列表中的updatetime字段,<view>{{item.updatetime}}</view>,把view中的时间戳转换成具体时间,具体到秒显示的方法,用filters,但不要全局
时间: 2024-05-15 15:14:35 浏览: 90
过滤器。
您可以在Vue组件中实现一个本地过滤器来转换时间戳。
例如:
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.updatetime | formatDate }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [{ id: 1, updatetime: 1616481785 }]
};
},
filters: {
formatDate(timeStamp) {
const date = new Date(timeStamp * 1000);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
}
};
</script>
这里我们定义了一个名为formatDate
的本地过滤器来将时间戳转换成具体时间,然后在v-for
循环中使用这个过滤器来渲染每个时间戳的具体时间。
需要注意的是,过滤器只在Vue组件的模板中生效,而不是全局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![.zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)