[Vue.js] v-bind : 유동적으로 class, id 지정하기

조건에 따라 class 토글하기

<!-- 기본형 -->
<div v-bind:class="{'클래스명1' : 조건, '클래스명2' : 조건}"</div>

<!-- 축약형 -->
<div :class="{'클래스명1' : 조건, '클래스명2' : 조건}"</div>

변수의 값을 class로 지정하기

...
<!-- 변수 'class1', 'class2'의 값이 클래스들로 지정됨 -->
<section :class="[class1, class2]">
...

<script>
    import {
        createApp,
        ref
    } from 'vue'

    const App = {
        setup() {
            const class1 = ref('aaa');
            const class2 = ref('bbb');
            
            ...

            return {
                class1,
                class2
            }
        }
    };
    createApp(App).mount('#app');
</script>

id는 v-bind:id나 :id를 사용하면 된다.

 

 

---

예시 1) 변수 값에 따라 클래스 지정하기 

...
<!-- 'wrap' 클래스 기본 적용 -->
<!-- 'on' 클래스는 'onClass' 변수 값에 따라 변경됨 -->
<section :class="{'wrap': true, 'on': onClass}">
...

<script>
    import {
        createApp,
        ref
    } from 'vue'

    const App = {
        setup() {
            const onClass = ref(false);
            
            ...

            return {
                onClass
            }
        }
    };
    createApp(App).mount('#app');
</script>

예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기

<!-- 문제를 맞혔다면 (quiz.correct === true) 'right' 클래스 적용 -->
<!-- 문제를 틀렸다면 (quiz.correct === false) 'wrong' 클래스 적용 -->
<div class="quiz_box" v-for="(quiz, quiz_index) in quiz_list"
	:class="{'right' : quiz.correct, 'wrong' : !quiz.correct}">