Vue js. Several classes with js

user_16712069 0
Viewed 44
<div class="container" :class="{ qwerty: !open }" :class="lower? 'left' : 'right'">

Hi, why vue doesn't allow me to add several classes with conditions, like in example.
It allows to add one only.
How to implement this?

vue.js javascript
3 Answers

Use Array Syntax.

:class="[lower ? 'left' : 'right', upper ? 'up' : 'down']"
user_4312940

There are multiple ways to do this, but I think for you it should be enough to do this:

:class="[{qwerty: !open}, lower ? 'left' : 'right']"

it's a mix from passing an array of classes and passing objects

user_163656850

If you have multiple conditions that goes too lengthy including too many logics then go with computed

<div class="container" :class="getClass">

then

computed: {
 getClass() {
  var className = 'container';
  if(!this.open) className = className+' '+'querty';

  if(this.lower) className = className+' '+'left';
  else className = className+' '+'right';

  return className;
 }
}
user_112811520
Related