广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

随着社交网络等平台的普及，时间轴逐渐成为了人们分享生活经历的一种流行形式。时间轴可以按照时间顺序展示一系列事件或活动，帮助人们回顾过去，了解历史，同时也可以用作展示个人成长、旅行日记、团队项目进展等内容。

在网页开发中，想要实现时间轴的展示，则可以使用Vue框架，来快速搭建并实现效果。下面我们就来了解如何使用Vue实现时间轴。

一、页面布局

时间轴通常分为两种形式：纵向时间轴和横向时间轴。横向时间轴一般展示某种时间段内一系列事件的内容，而纵向时间轴则按照时间顺序展示事件，类似一个时间线。

本文以纵向时间轴为例，首先根据设计稿，我们需要撰写页面布局代码；

<div class="timeline">  <div class="timeline-header">    <div class="timeline-header-line"></div>  </div>  <div class="timeline-container">      <div class="timeline-item">        <div class="timeline-item-time">2010年</div>        <div class="timeline-item-content">content 1</div>      </div>      <div class="timeline-item">        <div class="timeline-item-time">2012年</div>        <div class="timeline-item-content">content 2</div>      </div>      <div class="timeline-item">        <div class="timeline-item-time">2015年</div>        <div class="timeline-item-content">content 3</div>      </div>      <div class="timeline-item">        <div class="timeline-item-time">2017年</div>        <div class="timeline-item-content">content 4</div>      </div>  </div></div>

在这里为了让样式更好的展示，我采用了flex布局。

二、定义数据及渲染

接下来，需要在 Vue 实例中定义数据并将数据渲染进页面中。

new Vue({  el: '#app',  data: {    list: [      {        time: '2010年',        content: 'content 1'      },      {        time: '2012年',        content: 'content 2'      },      {        time: '2015年',        content: 'content 3'      },      {        time: '2017年',        content: 'content 4'      }    ]  }})

然后使用v-for指令在页面上循环遍历数据，并使用{{}}绑定数据到页面中。

<div class="timeline-item" v-for="item in list">  <div class="timeline-item-time">{{ item.time }}</div>  <div class="timeline-item-content">{{ item.content }}</div></div>

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将data中的list属性添加一个新属性isShow，用于标识是否显示当前事件内容。

data: {  list: [    {      time: '2010年',      content: 'content 1',      isShow: false    },    {      time: '2012年',      content: 'content 2',      isShow: false    },    {      time: '2015年',      content: 'content 3',      isShow: false    },    {      time: '2017年',      content: 'content 4',      isShow: false    }  ]}

接下来，可以为每个事件添加点击事件，来控制当前事件内容展示和隐藏，这里我们需要用到Vue的事件处理器和class绑定。

<div class="timeline-item" v-for="(item, index) in list" :key="index">  <div class="timeline-item-time" @click="item.isShow = !item.isShow">    {{ item.time }}  </div>  <div class="timeline-item-content" :class="{show: item.isShow}">{{ item.content }}</div></div>

我们可以在class属性中添加判断，如果当前item.isShow为真则添加show类，否则不添加，从而实现事件内容的展示和隐藏。

.timeline-item-content {  display:none;  height: 0;  transition:all .3s linear;}.show {  display:block;  height: auto;}

通过上面的代码可以实现一个最基本的时间轴组件。

最后简单贴上完整的代码。

<div id="app">  <div class="timeline">    <div class="timeline-header">      <div class="timeline-header-line"></div>    </div>    <div class="timeline-container">      <div class="timeline-item" v-for="(item, index) in list" :key="index">        <div class="timeline-item-time" @click="item.isShow = !item.isShow">          {{ item.time }}        </div>        <div class="timeline-item-content" :class="{show: item.isShow}">          {{ item.content }}        </div>      </div>    </div>  </div></div><style>  .timeline {    position: relative;    max-width: 1000px;    margin: 30px auto;  }  .timeline-header {    position: absolute;    top: 0;    left: 50%;    width: 2px;    height: 100%;    background: #ccc;    transform: translate(-50%, calc(50% - 15px));  }  .timeline-header-line {    position: absolute;    top: 0;    left: 50%;    width: 50px;    height: 30px;    background: #ccc;    transform: translateX(-50%);    border-radius: 30px;  }  .timeline-container {    padding: 40px;    display: flex;    flex-direction: column;    justify-content: space-between;    position: relative;  }  .timeline-item {    display: flex;    flex-wrap: wrap;    justify-content: space-between;    position: relative;    margin-bottom: 50px;    padding: 0 50px;    cursor: pointer;  }  .timeline-item:after {    content: '';    position: absolute;    top: 12px;    left: -15px;    width: 20px;    height: 20px;    background: #ccc;    border-radius: 50%;  }  .timeline-item:before {    content: '';    position: absolute;    top: 0;    left: -2px;    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-left: 20px solid #ccc;  }  .timeline-item:after,  .timeline-item:before {    z-index: 2;  }  .timeline-item-content {    display: none;    height: 0;    transition: all .3s linear;    position: relative;    z-index: 1;    width: 100%;    margin-left: 10px;  }  .timeline-item-time {    width: 150px;    font-size: 16px;    font-weight: bold;    color: #333;    text-align: right;    flex-shrink: 0;    margin-right: 20px;  }  .show {    display: block;    height: auto;  }</style><script>  new Vue({    el: '#app',    data: {      list: [        {          time: '2010年',          content: 'content 1',          isShow: false        },        {          time: '2012年',          content: 'content 2',          isShow: false        },        {          time: '2015年',          content: 'content 3',          isShow: false        },        {          time: '2017年',          content: 'content 4',          isShow: false        }      ]    }  })</script>

以上就是如何使用 Vue 实现时间轴？的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~