Vueを使用してクラスを動的に適用する方法

条件に応じてVue出力をクラスまたは別のクラスにする方法を学ぶ

クラスを適用したいとしますbackground-dark要素に、isDark小道具が真である場合は、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チュートリアル: