Vue如何动态绑定类

 

            例1：放在循环里点击切换类，根据点击的index来确定

                 <el-menu-item  :index="index+'' "  v-else-if="!item.classify" @click="menuClick(item, index);"  

                     :class="{'active-menu': index+''===activeIndex}">

                     <i :class="item.iconclass" style="margin-right:10px;"></i>

                     <span slot="title">{{ item.navtitle }}</span>

                  </el-menu-item>

            例2：根据条件来判断使用特定的类

                  <div :class="{'active':isActive}"></div>

                对象中也可以传入多个属性，来动态切换class

                  <div class="static" :class="{'active':isActive,'error':isError}"></div>

            例3：使用三元表达式来根据条件切换类

                 <i :class="[moreshow?'icon-shangla':'icon-xiala2', 'icon iconfont']" ></i>

            例4：根据值的变化动态拼接类名

                <span :class="'icon iconfont icon-ic_liebiao_'+row.mainType"></span>

           例5：一个固定类名，和一个需要条件判断的类名

                <div :class="['editor-container', {'toolbar-hide': ishide}]"></div>