Go back to Examples

Dynamic class on component

Component - Advanced

Dynamic classes can be used inside a component. This can be used for changing the color and size of an element.

                <!-- Component: v-section-darkmode -->
<section class="py-20" v-bind:class="{'bg-dark text-white': isDarkMode }">
    <h1>Section Header</h1>
</section>

<!-- Referencing the component inside a loop -->
<template v-component="v-section-darkmode" v-data="{'isDarkMode': true}"></template>
CMS data inside component Dynamic style on component