Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!

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:

  <div :class="[ isDark ? 'background-dark' : 'background-light' ]">
    <h1>{{ msg }}</h1>

export default {
  props: {
    isDark: Boolean

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .background-dark {
    background-color: #000;
  .background-light {
    background-color: #fff;

(many thanks to Adam Wathan for suggesting this to me on the Tailwind Slack)

Download my free Vue Handbook

The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!

More vue tutorials: