vue如何写一个有点击事件的时间轴

你可以使用 Vue.js 的 v-for 指令和 v-on 指令来实现一个有点击事件的时间轴。下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(event, index) in events" :key="index" @click="selectEvent(index)">
      <div>{{ event.title }}</div>
      <div>{{ event.date }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          title: "Event 1",
          date: "2021-01-01"
        },
        {
          title: "Event 2",
          date: "2021-01-02"
        },
        {
          title: "Event 3",
          date: "2021-01-03"
        }
      ],
      selectedEventIndex: -1
    };
  },
  methods: {
    selectEvent(index) {
      this.selectedEventIndex = index;
      // 在这里可以根据需要做一些其他操作
    }
  }
};
</script>

在上面的代码中，我们使用 v-for 指令遍历事件列表并渲染每个事件。使用 v-on 指令监听每个事件的点击事件，并调用 selectEvent 方法。selectEvent 方法将选中的事件的索引存储在 selectedEventIndex 数据属性中，以便在需要时进行其他操作。注意，我们使用了 Vue.js 的响应式系统来跟踪 selectedEventIndex 的值的变化。