[Vue.js] - Vue 클래스(class) 데이터 바인딩 하는 방법

#Vue 클래스(class) 데이터 바인딩 하는 방법

-Vue에서 `v-bind:class` 디렉티브를 사용하여 요소의 클래스를 동적으로 바인딩할 수 있습니다.

이 방법을 사용하면 Vue 데이터를 기반으로 요소의 클래스를 추가하거나 제거할 수 있습니다.

 

-Vue.js 코드

<template>
    <div>
      <div class="container" v-bind:class="{
        'active': isActive, 'text-red': hasError
      }">Class Binding</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true,
                hasError: false
            };
        }
    }
</script>

<style scoped>
    container {
        width: 100%;
        height: 200px;
    }
    .active {
        background-color: yellow;
        font-weight: bold;
    }
    .text-red {
        color: red;
    }
</style>

 

-Vue 클래스(class) 데이터 바인딩 테스트

true, false로 클래스 바인딩 처리를 할 수 있습니다.

hasError이 true로 바뀌게 되면 'Class Binding' 문구가 빨간색으로 변합니다.

 

 

#배열을 사용해서 클래스 바인딩 하는 방법

 

-Vue.js 코드

<template>
    <div>
      <div class="container" v-bind:class="[isActive, hasError]">Class Binding</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isActive: 'active',
                hasError: 'text-red'
            };
        }
    }
</script>

<style scoped>
    container {
        width: 100%;
        height: 200px;
    }
    .active {
        background-color: yellow;
        font-weight: bold;
    }
    .text-red {
        color: red;
    }
</style>

 

-배열을 사용해서 클래스 바인딩 테스트

배열을 사용하는 경우 특정 조건에 따른 클래스 바인딩 처리를 true/false로 할 수 없습니다.

 

 

#인라인 스타일 데이터 바인딩 처리하는 방법

 

-Vue.js 코드

<template>
    <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
    <div v-bind:style="[style1, style2]">인라인 스타일 배열 바인딩</div>
</template>

<script>
    export default {
        data() {
            return {
                styleObject: {
                    color: 'red',
                    fontSize: '13px'
                },
                style1: 'background-color:yellow;',
                style2: 'font-weight:bold;'
            };
        }
    }
</script>

 

-인라인 스타일 데이터 바인딩 테스트