How to dynamically apply a class using Vue 2
New Courses Coming Soon
Join the waiting lists
Learn how to make Vue output a class or another depending on some condition
Say you want to apply the class background-dark
to an element, if the isDark
prop is true, and otherwise add the background-light
.
How would you do that in Vue?
Use :class="[ isDark ? 'background-dark' : 'background-light' ]"
Here’s an example:
<template>
<div :class="[ isDark ? 'background-dark' : 'background-light' ]">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
isDark: Boolean
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.background-dark {
background-color: #000;
}
.background-light {
background-color: #fff;
}
</style>
(many thanks to Adam Wathan for suggesting this to me on the Tailwind Slack)
→ Get my Vue.js 2 Handbook
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X