Vue.js를 사용하여 소품을 기반으로 한 요소에 여러 클래스를 추가하려면 어떻게 해야 합니까?

Vue.js를 사용하여 소품을 기반으로 한 요소에 여러 클래스를 추가하려면 어떻게 해야 합니까?

먼저 코드를 보고 문제를 파악합니다.

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

여기 보시는 것처럼 제 플랫 소품을 가지고 있어서 플랫 클래스가 박스판인지 아닌지를 보여줄 수 있습니다.하지만 누군가가 앱 소품을 작동시켜 헤더에 패딩을 넣었으면 합니다.

여기서 문제되는 것은 dat입니다.여러 : dat를 1개의 요소에 넣을 수 없습니다.이에 대한 해결책이 있나요?

다음과 같이 동일한 클래스 속성으로 결합해 보십시오.

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

를 참조해 주세요.

원하는 것을 달성하기 위한 몇 가지 방법이 있습니다.Vue는 이 일에 능숙합니다.

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>

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

사용방법

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

그러나 이 경우 오브젝트를 반환하기 전에 값을 처리하기 위해 (템플릿을 업데이트하지 않고) 더 긴 코드를 쓸 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/55680206/how-to-add-multiple-classes-to-an-element-based-on-props-using-vue-js