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之间要用空格隔开