我的项目中实际使用的是vue+element ui

:class

:class等同于 v-bind:class
借用Vue官网的解释：

<div v-bind:class="[active: isActive ]"></div>

Vue官网使用时{}并不是[]但是在使用的时候发油编译器报错
本人刚接触前端，有不对的希望各位指正
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 真值
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

<div
  class="static"
  v-bind:class="[ active: isActive, 'text-danger': hasError ]"
></div>
和如下 data：

data: {
  isActive: true,
  hasError: false
}
结果渲染为：

<div class="static active"></div>

直接看我们需要解决的问题：
1、我们有一个span 当点击span我们需要给他添加一个‘active’样式，而且他原本也有一个样式‘menu’

<span class="menu " :class="[activeStyle == index ? 'active':'']"  v-for="(item,index) in list" :key="index" @click="operator(item,index)">{{item.name}}</span>
export default {
    data() {
        return {
            activeStyle:-1,
        }
    },
    methods:{
        operator(item,index) {
            this.activeStyle=index
            //item相关操作逻辑
        }
    }
}

如果原先span没有class的话直接就用:class前面的class就不用管了
2、同理如果需要给标签添加一个style也可以动态绑定

<el-button size="mini" :type="primaryType==index?'primary':''" v-for="(item,index) in list" :key="index" @click="operator(item),addprimary(index)">{{item.name}}</el-button>
export default {
    data() {
        return {
            primaryType:-1,
        }
    },
    methods:{
        addprimary(index){
            this.primaryType=index
        },
        operator(item){
        
		}
    }
}

这里click我们把方法分开了operator作为具体的业务处理，addprimary方法只处理样式

上述均为个人想法，如有不对请指正