이 기사는 초보자 용 Vue.js에서 여러 클래스를 부여하는 방법을 설명하는 자신의 메모입니다.
잘못된 점이 있으면 지적을 부탁드립니다.

이 기사는 다음 방향의 기사입니다.

예상 독자:
· v-bind의 사용법은 알지만 여러 class를 요소에 부여하는 방법을 모르는 분

CSS 속성을 부여하는 방법에는 두 가지가 있습니다.

여러 속성을 부여하는 방법에는 다음 두 가지가 있습니다.

· 요소에 직접 여러 속성을 지정하여 부여
・미리 vu측에서 준비한 오브젝트형을 사용해 부여한다(권장)

요소에 직접 여러 속성을 지정하여 부여

이하, 기본적인 작성 방법

<p :class={クラス名: true(もしくはfalse), クラス名: true(もしくはfalse)}

「true 혹은 false」는, 「지정한 클래스를 부여할지(true)인가 하지 않는(false)인가」를 지정하고 있습니다.
실제로 이 방법으로 기술한 예가 이하가 됩니다.

<h4 :class="{ textcolor: false, 'bg-color': true}">テキストカラーが赤(falseなので適用されない)、背景カラーがスカイブルー（trueなので適用）</h4>

.textcolor {
    color: red;
}
.bg-color {
    background-color: skyblue;
}

실행 결과


또 상기의 방법은 true false로 클래스를 부여하거나 제외하는 것을 가능하게 하고 있습니다.
만약 제거할 필요가 없는 경우나 같은 프로퍼티로 다른 것을 지정하고 싶은 경우등은 이하의 방법도 있습니다.

이하, 기본적인 작성 방법

<p :style="{セレクタ名: 変数名, セレクタ名: 変数名}"></p>

<script>
new Vue({
    el: '#app',
    data: {
       変数名: '具体的な値',
       変数名: '具体的な値',
 }
})
</script>

위의 예에서는 {속성 이름: 변수 이름}이지만 직접 특정 값을 직접 설명할 수도 있습니다. (예: {color: 'red'})
실제로 이 방법으로 기술한 예가 이하가 됩니다.

<h4 :style="{color: textColor, 'background-color': bgColor}">テキストカラーが赤、背景カラーがスカイブルー</h4>

<script>
new Vue({
    el: '#app',
    data: {
       textColor: 'red',
       bgColor: 'skyblue',
 }
})
</script>

실행 결과

미리 vu측에서 준비한 오브젝트형을 사용해 부여한다(권장)

이하, 기본적인 작성 방법

<h1 :class="classObj"></h1>

new Vue({
    el: '#app',
computed: {
   classObj() {
     return { textcolor: true, 'bg-color': true}
     }
  }
})

.textcolor {
    textcolor: red;
}
.bg-color {
    background-color: skyblue;
}

실행 결과

덤 Object형을 2개 부여하는 방법

이하, 기본적인 작성 방법

<p :style="[オブジェクト名, オブジェクト名]"></p>
<script>
  new Vue({
     el: '#app',
     data: {
        オブジェクト名: {
            セレクタ名: '指定する値', 
            セレクタ名: '指定する値'
       },
        オブジェクト名: {
            セレクタ名: '指定する値'
      }
    }
})
</script>    

실제로 이 방법으로 기술한 예가 이하가 됩니다.

<h4 :style="[styleObj, pxObj]">Object型を二つ付与する</h4>

<script>
  new Vue({
     el: '#app',
     data: {
        styleObj: {
            color: 'red', 
            'background-color': 'skyblue'
       },
        pxObj: {
            fontSize: '100px'
      }
    }
})
</script>    

실행 결과