vue中可以通过 :class=""这样来根据一定的条件来动态添加class，但是有时候需要判断的条件比较多，需要动态添加的class也比较多，这个时候其实也很简单

<template>
  <section class="p-10 cursor-pointer">
    <p :class="`${condition1 ? 'font' : ''}${condition1 ? ' size' : ''}`">
      HAPPY
    </p>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        condition1: true,
        condition2: true
      };
    },
    methods: {
    }
  };
</script>

<style lang="scss">
  .font {
   color: red;
  }
  .size {
    font-size: 50px;
  }
</style>