Go back to Examples

Binding HTML Classes

CMS - Advanced

Binding HTML classes allows dynamic styling of an element based on collection list data. This combines conditional rendering inside an object to render a single or multiple classes.

                <template v-for="category in categories">
    <span class="badge" v-bind:class="{'bg-primary': categoryIndex === 0, 'bg-secondary': categoryIndex > 0}" v-html="category.name"></span>
</template>
Table of contents CMS Slider