原文链接 本文需求有些改动：需要用到的是数组语法 直接上代码需要记录下：
<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>
