# How to dynamically apply a class using Vue 2

> Learn how to dynamically apply a class in Vue 2 using a class binding with a ternary, so an element gets one class or another depending on a condition.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-07-12 | Topics: [Vue.js](https://flaviocopes.com/tags/vue/) | Canonical: https://flaviocopes.com/vue-apply-class-dynamically/

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](https://flaviocopes.com/vue-introduction/)?

Use `:class="[ isDark ? 'background-dark' : 'background-light' ]"`

Here's an example:

```html
<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](https://twitter.com/adamwathan) for suggesting this to me on the Tailwind Slack)