Как добавить несколько классов на элементе на основе реквизита?

Question

сначала посмотрите на мой код, чтобы понять проблему.

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

так что, как вы можете видеть здесь, у меня есть моя плоская опора, которая вызовет плоский класс, чтобы показать тень от коробки или нет. Но я также хочу, чтобы кто-то активировал опору приложения, которая добавит в заголовок отступы.

проблема в том, что вы не можете поместить несколько классов в элемент. есть ли какое-то решение для этого?

Answer 1

Есть несколько способов достичь того, что вы пытаетесь сделать, Вю в этом преуспел.

1.Передайте массив классов

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

2.Передать объект

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

Здесь в качестве классов будут заданы только реквизиты, имеющие истинное значение.

2.1 Если вы используете ES6 Вы можете использовать сокращенное значение свойства объекта

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

Бонус

Вы также можете смешать 1 и 2, если необходимо (иногда мне это нужно)

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

Answer 2

Попробуйте объединить их в одном атрибуте класса следующим образом:

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

См. official documentation

Answer 3

Вы можете создать метод, который возвращает тот же объект, что и ответ @Boussadjra Barhim.

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

Используйте его через

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

Но в этом случае вы можете написать другой более длинный код (без удаления шаблона) для обработки значений перед возвратом объекта

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