How to add multiple classes to an element based on props using Vue.js?

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?

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

Class and Style Bindings — Vue.js, In-Depth. Component Registration � Props � Custom Events � Slots � Dynamic & Async A common need for data binding is manipulating an element's class list and its inline styles. You can have multiple classes toggled by having more fields in the object. We can pass an array to v-bind:class to apply a list of classes: < div v-bind:class = "[{ active: isActive }, errorClass]" > </ div > With Components. This section assumes knowledge of Vue Components. Feel free to skip it and come back later. When you use the class attribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be

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

How to bind the multiple class in Vue2?, I faced one problem when I put the multi-class in Vue. 'popup' : ''"> Here popupMode is props and it is defined. I'd like to add some c… # Install using Yarn $ yarn add vue-class-component vue-property-decorator -D # Or install using NPM $ npm install vue-class-component vue-property-decorator --save-dev Your First Class Component. A class component is simply a TypeScript class that extends the Vue object.

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>

How to Dynamically Add a Class Name in Vue, Adding a dynamic class name is as simple as adding the prop ':class' to your component. It lets you write custom themes more easily, add classes based on the state of Using static and dynamic classes in Vue; How we can use regular Javascript We are using the array to set two dynamic class names on this element. Vue.js allows for binding styles and classes dynamically to elements with the v-bind:style and v-bind:class directives. Dynamically Binding Styles. Let’s say we want to increase or decrease the font size based on user input. To this end, Vue provides us with the v-bind:style directive. Here’s our data model: data() { return { fontSize: 10 } }

Using Conditional Class Bindings in Vue, To refresh your memory, to bind a variable to a prop, class, or style, we use this syntax: <template> If the value of className is blue-text , it will add the class . blue-text to the span element. Normally we In Javascript, the && (AND) operator will short-circuit if the first value is false . Since both Applying Multiple Classes. Again, if you’re using string templates, this limitation does not apply. Prop Types. So far, we’ve only seen props listed as an array of strings: props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] Usually though, you’ll want every prop to be a specific type of value.

add class dynamically vuejs Code Example, Get code examples like "add class dynamically vuejs" instantly right from js apply multiple style based on the conditions example � v-if in class� For this reason, Vue.js provides special enhancements when v-bind is used for class and style. In addition to Strings, the expressions can also evaluate to Objects or Arrays. In addition to Strings, the expressions can also evaluate to Objects or Arrays.

Dynamic Styles With Vue.js, Binding Multiple Classes We can apply multiple classes to an item by passing in an array of classes to the v-bind:class directive. And in the template, we can refer to the same array using the v-bind:class directive. This will apply both the selected and the underlined classes to the element. The classList object makes it easy to add, remove, toggle or check for the presence of classes on elements without having to do string operations.