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之間要用空格隔開