原文链接
本文需求有些改动：需要用到的是数组语法
直接上代码需要记录下：

<template>
  <div class="flex-container">
    <div class="flex-item" v-for="(item, index) in items" :key="index">
      <i :class="[item.fontawesome,{active:current==index}]" @click="addClass(index)">{{ item.content }}</i>  
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0,
      items: [
        { fontawesome: 'fa fa-comments-o', content: '今日接待' },
        { fontawesome: 'fa fa-envelope', content: '未读消息' },
        { fontawesome: 'fa fa-address-book', content: '所有好友' },
        { fontawesome: 'fa fa-history', content: '历史消息' },
        { fontawesome: 'fa fa-cogs', content: '手机设置' }
      ]
    }
  },
  methods: {
    addClass (index) {
      this.current = index
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-container {
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 12.5%;
  border-right: 1px solid $hrc;
  background-color: #272b30;
}
.flex-item {
  margin: auto;
}
.flex-item :hover {
  color: white;
}
i,
span {
  color: grey;
  font-size: 18px;
  cursor: pointer;
}
.active {
  color: #09bb07;
}
</style>