vue中根据条件展示不同的样式,这时就需要使用条件绑定class

条件绑定class以及使用多个class

<template>
<!--当isUseA为true时,AClass才会生效,否则只生效BClass-->
  <div :class="[{AClass,isUseA}, BClass]"></div>
<!--除了上面的对象写法外,也支持三目写法-->
   <div :class="[isUserA ? AClass : BClass]">
</template>
<script>
export default {
  data() {
    return {
      isUseA: true,
      AClass: 'AClass'
      BClass: 'BClass'
    }
  },
</script>
<style lang="scss">
    .AClass {
        
    }
    .BClass {
        
    }
</style>