Go back to Examples

Dynamic style on component

Component - Advanced

Dynamic styling can be used inside a component. This can be used for changing the color or background color using a color picker.

                <!-- Component: v-section-bg-color -->
<section class="py-20 v-bind:style="{'background-color': backgroundColor}">
    <h1>Title</h1>
</section>

<!-- Referencing the component inside a loop -->
<template v-component="v-section-bg-color" v-data="{'backgroundColor': '#bf6d6d'}"></template>
Dynamic class on component Headroom