如何使用 Vue 实现时间轴？

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

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

一、页面布局

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

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

立即学习“前端免费学习笔记（深入）”；

  

    

  
  

      

        
2010年
        
content 1
      
      

        
2012年
        
content 2
      
      

        
2015年
        
content 3
      
      

        
2017年
        
content 4
      
  

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

二、定义数据及渲染

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

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

下载

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指令在页面上循环遍历数据，并使用{{}}绑定数据到页面中。

  
{{ item.time }}
  
{{ item.content }}

三、实现动画效果

为了增加用户体验，我们可以为每个事件添加动画效果。将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绑定。

  

    {{ item.time }}
  
  
{{ item.content }}

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

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

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

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

  

    

      

    
    

      

        

          {{ item.time }}
        
        

          {{ item.content }}