6장 class와 style 바인딩

1) class_binding

<template>

    <div>

        <div

            class="text"

            :class="[isActive ? 'active-class' : 'class', errorClass, classObject]"

        >

            텍스트 입니다.

        </div>

        <button v-on:click="toggle">toggle</button>

        <button v-on:click="hasError = !hasError">toggleError</button>

    </div>

</template>

<script>

import { computed } from '@vue/reactivity';

import { reactive, ref } from 'vue';

export default {

    setup() {

        const isActive = ref(true);

        const hasError = ref(false);

        // const classObject = reactive({

        //  active: true,

        //  'text-danger': true,

        // });

        const classObject = computed(() => {

            return {

                active: true && true,

                'text-danger': true && true,

                'text-blue': true,

            };

        });

        const activeClass = ref('active');

        const errorClass = ref('error');

        const toggle = () => {

            isActive.value = !isActive.value;

        };

        return { isActive, toggle, hasError, classObject, activeClass, errorClass };

    },

};

</script>

<style scoped>

.active {

    font-weight: 900;

}

.text-danger {

    color: red;

}

</style>

2) style_binding

<template>

    <div>

        <div :style="styleObject">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae enim

            nostrum molestiae earum nesciunt ad, totam perspiciatis consequuntur

            consectetur, quidem, cumque eveniet odit excepturi amet eum nisi veritatis

            similique veniam!

        </div>

        <button v-on:click="fontSize--">-</button>

        <button v-on:click="fontSize++">+</button>

    </div>

</template>

<script>

import { computed, reactive, ref } from 'vue';

export default {

    setup() {

        // const styleObject = reactive({

        //  color: 'red',

        //  fontSize: '13px',

        // });

        const fontSize = ref(13);

        const styleObject = computed(() => {

            return {

                color: 'red',

                fontSize: fontSize.value + 'px',

            };

        });

        return { styleObject, fontSize };

    },

};

</script>

<style lang="scss" scoped></style>