Vue中动态添加多个class

Vue中动态添加多个class

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>

 

效果：

 

原理很简单，就是通过 ${xxx} 取变量的方法来取值，在：class=""里写多个${XX}来取值，取到不同的值，最终就会产生多个class

注意多个className之间要用空格隔开