First look at my code to understand the problem.

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

so as you can see here do i have my flat prop that will trigger a flat class to show a box-shadow or not. But i also want someone to trigger the app prop that will put some padding in the header.

the problem here is dat you can't put multiple :classes in a element. is there any solution for this?

First look at my code to understand the problem.

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

so as you can see here do i have my flat prop that will trigger a flat class to show a box-shadow or not. But i also want someone to trigger the app prop that will put some padding in the header.

the problem here is dat you can't put multiple :classes in a element. is there any solution for this?

• javascript
• html
• css
• vue.js
• vuejs2

• 3 Check the docs: vuejs.org/v2/guide/class-and-style.html – cdrini Commented Apr 14, 2019 at 22:23

3 Answers 3

There are several ways to achieve what you're trying to do, Vue is great at this.

1. Pass an array of classes

<div 
  class="header" 
  :class="[flat ? 'flat' : null, app ? 'app' : null]"
></div>

2. Pass an object

<div 
  class="header" 
  :class="{flat: flat, app: app}"
></div>

Here, only the props that have a truthy value will be set as classes.

2.1 If you're using ES6 You can use the object property value shorthand

<div 
  class="header" 
  :class="{flat, app}"
></div>

Bonus

You can also mix 1 and 2 if necessary (I've needed it sometimes)

<div 
  class="header" 
  :class="[{flat, app}, someOtherClass]"
></div>

Try to combine them in the same class attribute as follows:

<div class="header"
  :class="{ 'flat':flat,'app' : app}"
>header</div>

See the official documentation

You can create a method that returns the same object as @Boussadjra Barhim answer.

//if value is evaluated into true, the key will be a part of the class
setClass: function(flat, app){
    return {
      flat: flat, 
      app: app
    }
}

Use it via

<element :class="setClass(flat, app)" />

But in this case you can write other longer code (without uglifying the template) to process the values before returning an object

setClass: function(flat, app){
    //do something else with inputs here
    return {
      flat: flat, 
      app: app
    }
}