24 Mar 2020
Programatically change class on Vue.js elements
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:
<template>
<div :class="[lightMode ? 'light-mode' : 'dark-mode']">
<h1>{{ title }}</h1>
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
props: {
lightMode: Boolean
}
}
</script>
<style scoped>
.light-mode {
background-color: #ffffff;
}
.dark-mode {
background-color: #000000;
}
</style>