Vue js. Several classes with js-CodePudding

<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?

CodePudding user response：

Use Array Syntax.

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

CodePudding user response：

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

CodePudding user response：

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;
 }
}