uniapp中在标签中用v-for遍历后得到item.createTime="2023-06-02 10:50:48",如何将item.createTime="2023-06-02 10:50:48"变成item.createTime="2023-06-02"并将其回显到标签中
时间: 2024-03-21 08:40:41 浏览: 166
你应该知道的这些Mybatis-Plus使用技巧(小结)
你可以使用 JavaScript 的字符串截取方法来截取日期部分,然后将其赋值给一个新的属性,比如 `item.date`。具体操作如下:
1. 使用 `v-for` 遍历数组,对于每个遍历到的对象,可以在标签中使用 `{{ item.createTime }}` 显示完整的时间字符串。
2. 在 `data` 中定义一个空数组 `list`,然后在 `created` 钩子函数中将遍历到的数组赋值给 `list`。
3. 使用 `forEach` 方法遍历 `list` 数组,对于每个遍历到的对象,使用 `substring` 方法截取日期部分,并将其赋值给一个新的属性 `date`。
4. 在标签中使用 `{{ item.date }}` 显示日期部分。
示例代码如下:
```html
<template>
<div>
<div v-for="item in list" :key="item.id">
<!-- 显示完整时间字符串 -->
{{ item.createTime }}
<br>
<!-- 显示日期部分 -->
{{ item.date }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: []
}
},
created() {
// 假设遍历到的数组为 arr
const arr = [
{ id: 1, createTime: '2023-06-02 10:50:48' },
{ id: 2, createTime: '2023-06-03 11:20:36' },
{ id: 3, createTime: '2023-06-04 09:40:12' }
]
this.list = arr
// 遍历数组,截取日期部分并赋值给新属性
this.list.forEach(item => {
item.date = item.createTime.substring(0, 10)
})
}
}
</script>
```
阅读全文