[Vuejs]-:class bind with multiple arguments

by

1👍

✅

In your code, you’re doing things complex. Here is the simpler one.

new Vue({
  el: '#app',
  data() {
    return {
      animation: 'fade-out',
      alignment: 'center',
      side: 'right'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <section 
    class="animation__placeholder"
    :class="`
      animation__placeholder--${animation}
      animation__placeholder--${alignment}
      animation__placeholder--${side}
    `"
  >Devtools</section>
</div>
👤Amini

0👍

You can bind multiple classes as a list.

:class="['A B', condition1 ? 'C' : 'D', condition2 && 'E']"

Assuming that condition1 evaluates to false and condition2 to true, the resulting component would have classes ‘A B D E’.

Now, nothing is stopping you from putting in functions in there from which you return a class name, which is probably a preferred method considering you shouldn’t be putting too much login into templates anyway.

With that said, I think that @Amini‘s solution is very elegant and probably a better fit for your use case.

👤Nikola Gava

Leave a comment