Do you want to change a class of some element programatically using Vue.js?

That is actually a simple task to complete. Let’s imagine that you want to toggle between dark-mode and light-mode classes. Just use something like class=“[ lightMode ? ‘light-mode’ : ‘dark-mode’ ]”.

A full example of this can be seen here:

    <div :class="[ lightMode ? 'light-mode' : 'dark-mode' ]">
        <h1>{{ title }}</h1>
        <p>{{ text }}</p>

    export default {
        props: {
            lightMode: Boolean

<style scoped>
    .light-mode {
        background-color: #FFFFFF;
    .dark-mode {
        background-color: #000000;