vue怎么把list数组用时间轴形式展示
时间: 2024-03-06 22:47:07 浏览: 36
可以使用`<el-timeline>`组件来展示一个时间轴。下面是一个简单示例:
```html
<template>
<el-timeline>
<el-timeline-item v-for="item in list" :key="item.id" :timestamp="item.time">{{ item.content }}</el-timeline-item>
</el-timeline>
</template>
<script>
export default {
data() {
return {
list: [
{
id: 1,
time: '2021-01-01',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
id: 2,
time: '2021-01-05',
content: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.'
},
{
id: 3,
time: '2021-01-10',
content: 'Maecenas sed diam eget risus varius blandit sit amet non magna.'
}
]
};
}
};
</script>
```
在上面的代码中,我们使用`<el-timeline>`组件来创建一个时间轴,然后使用`v-for`指令遍历`list`数组,为每个数组元素创建一个`<el-timeline-item>`组件,并且使用`timestamp`属性来指定该元素的时间戳,使用`content`属性来指定该元素的内容。