ElementUi框架和vue.js动态绑定class样式类名

需求：

实现如下图所示，当我们点击菜单时，改变菜单色体的颜色。

实现方法：

1、定义一个css样式：

<style>
  .actived{color:#0EC5A1;}
</style>

2、data数据里定义一个变量

<script type="text/javascript">
new Vue({
    el: '#main',
    data: function() {
    return {
	activeIndex:"panel",
    }
},

3、html里的代码：

<!--导航菜单-->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" :class="{'actived': activeIndex == 'panel'}"  @click="switchMenu('panel')">数据面板</div>
    <div class="swiper-slide" :class="{'actived': activeIndex == 'order'}"  @click="switchMenu('order')">订单列表</div>
  </div>
</div>

解析：

:class="{'actived': activeIndex == 'panel'}" 这段代码的意思是：当activeIndex变量的值等于panel时，就给这个元素添加actived样式。