vue中的class和style是支持变量和方法的；
直接上代码

<template>
  <div id="root"> 
    <div :class="['red', 'bold']">数组绑定多个class</div>
    <div :class="[{red: isActive}, 'f30']" @click="isActive=!isActive">点我变色</div>
    <div :class="[showRed(), 'bold']">数组包含方法绑定class</div>
    <br/>
    <div :style="[red_f30, weight]">数组绑定多个变量style--<span @click="fun_x()">点我</span></div>
    <div :style="[red_f30,mx()]">数组包含变量+方法绑定style</div> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      red_f30: {
        color: "red",
        fontSize:"30px"
      },
      weight: {
        fontWeight: "bold"
      }
    };
  },
  methods: {
    showRed() {
      return "blue";
    },
    mx() {
      return {
        ...this.weight,
        fontSize: "20px"
      };
    },
    fun_x(){
      const yellow={
        color: "yellow",
        fontSize:"22px"
      }
      this.red_f30=yellow
    }
  }
};
</script> 

<style scoped>
#root{
  line-height: 50px;
}
.red{
  color:red; 
}
.blue{
  color:cornflowerblue;
}
.bold{
  font-weight: bold;
}
.f30{
  font-size:30px;
}
</style>