前端元素css的动态切换

在开发前端页面的时候， 如何动态的切换元素的css？主要有一下几种方式：

1.style内联单个或者少量属性动态切换

 :style=" markRed==true?'background-color:#F00;':'background-color: #00ff40;' "

Test.vue

<template>
   <div class="home">
      <div :style="markRed==true?'background-color:#F00;':'background-color: #00ff40;'"> </div>
      <button @click="markDivRed">变为红色</button>
   </div>
</template>
<style src="./Test.css"></style>
<script src="./Test.js"></script>

Test.js.

export default {
    data() {
        return {
            markRed:false
        }
    },
    methods: {
        markDivRed(){
            this.markRed = true;
        }
    }
}

2.css类