Как динамически применять класс с помощью Vue

Узнайте, как заставить Vue выводить класс или другой в зависимости от некоторых условий

Скажем, вы хотите применить классbackground-darkэлементу, еслиisDarkprop истинно, и в противном случае добавьтеbackground-light.

Как бы вы сделали это во Vue?

Использовать:class="[ isDark ? 'background-dark' : 'background-light' ]"

Вот пример:

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

(большое спасибоАдам Уотанза то, что предложил мне это на Tailwind Slack)

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: