class binding

props에 class binding시 각자 다른 값이 들어가야 하거나 안들어가도 될때

Before

Parent.vue

다음과 같은 Parent.vue에서 button을 하나의 컴포넌트로 만들때 서로 다른 class를 바인딩 시키는 법을 알아보겠습니다.

<template>
    <button class="btn-card btn-share">A</button>
    <button class="btn-card">B</button>
    <button class="btn-card btn-favorite">C</button>
</template>

After

Parent.vue

<template>
    <Child :title="'A'" :add-class="'btn-share'" />
    <Child :title="'B'" />
    <Child :title="'C'" :add-class="'btn-favorite'" />
</template>

Child.vue

<template>
    <button type="button" :class="['btn-card', addClass]">{{title}}</button>
</template>

<script>
    export default {
        name: 'Child',
        props: {
            title: {
                type: String,
                default: '',
                required: true,
            },
            addClass: {
                type: String,
                default: '',
                required: false,
            },
        },
    };
</script>

 

addClass가 있던 없던 바인딩된 값이 class에 추가로 들어오는 것을 확인할 수 있습니다.

이외에도 상황에 따른 class binding을 추가하겠습니다~!

댓글에 자유롭게 자기가 사용하고 있는 binding 방법을 적어주시고 같이 소통해요!