vue 动态切换样式 灵活使用 v-bind:class 和v-bind:style

1. 有时候会 遇到动态样式的切换

<el-menu
      :default-active="activeIndex"
      mode="horizontal"
      text-color="#333">
      <template v-for="(item,index) in items">
        <el-menu-item
          :index="item.parentId+''"
          :key="index"
          @click.native="openMenu(item,index)"
          style="color:#fff"   
          id="leftMenuItem"   
        >
          <template slot="title" >
            //图标 灵活切换颜色
            <i :class="item.icon" style="color:#fff;font-size:14px;font-weight:bold;"  v- 
              bind:style="'color:'+(index==activeIndex?'#9dd9ff':'#fff')"/>
            <span style="color:#fff;font-size:14px;font-weight:bold;"  v- 
               bind:style="'color:'+(index==activeIndex?'#9dd9ff':'#fff')">{{ item.label }} 
            </span>
          </template>
        </el-menu-item>
      </template>
  </el-menu>

export default {
   data() {
    return {
      activeIndex: '0',
 
      activeIndex2: '0',
    }
  },
}

2. 灵活使用：v-bind:class

   <el-menu-item  :index="item.id+''"  :key="index" 
                   @click.native="openMenu(item,index)"    id="leftMenuItem"   >
                 <template slot="title" >
                    <span style="font-size:14px;"  
                     :class="index==activeIndex2?'activ1':'activ2'"> 
                    </span>
                </template>
                 {{ item.label }}
</el-menu-item>  



<style>
.activ1{
  color:red;
} 
.activ2{
  color:green;
} 
</style>