How to use Vue dynamic application class

Understand how to make Vue output one course or another according to certain conditions

Say you want to apply for a coursebackground-darkTo an element ifisDarkprop is true, otherwise addbackground-light.

How would you do this in Vue?

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

This is 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>

(thank you very muchAdam WatsonSuggest this to me on Tailwind Slack)

Download mine for freeVue manual


More vue tutorials: