探索时间的脉络：Vue.js下的Timeline组件——Timeline Vuejs

<template>
  <div class="timeline">
    <div class="timeline-item" v-for="(event, index) in events" :key="index">
      <div class="timeline-content">
        <h3>{{ event.title }}</h3>
        <p>{{ event.description }}</p>
      </div>
      <div class="timeline-icon">
        <i :class="event.icon"></i>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Timeline',
  props: {
    events: {
      type: Array,
      required: true
    }
  }
}
</script>
 
<style scoped>
.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.timeline-item {
  display: flex;
  margin-bottom: 20px;
}
.timeline-content {
  margin-left: 20px;
  margin-right: 50px;
}
.timeline-icon {
  background-color: #eee;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-icon i {
  font-size: 20px;
}
</style>

这个代码实例展示了如何在Vue.js中创建一个简单的时间线组件，其中每个事件都可以有标题、描述和图标。该组件通过一个events数组作为prop接收数据，并使用v-for指令来循环渲染每个时间线项。