VUE将样式绑定在计算属性上，实现控件样式切换

<script setup>
import { ref,reactive,computed } from 'vue'
  
const foo = ref(0)
const object = reactive({foo})
const isActive = ref(true)
const hasbgc = ref(false)

const classObject = computed(()=>({
   'bgc':hasbgc.value, 
   active : isActive.value 
}))

function increment() {
  foo.value++
  hasbgc.value = !hasbgc.value
}

 
</script>

<template>
  <button @click="increment" class = "origin" :class="classObject">{{ foo }}</button>
</template>
<style>
  .origin{
    color:black;
  }
  .bgc{
    background:blue;
  }
  .active{
    color:red;
  }
</style>