如何使用Vue動態應用類

了解如何根據某些條件使Vue輸出一門課或另一門課

說您想申請課程background-dark到一個元素，如果isDarkprop是true，否則添加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>

（非常感謝亞當·沃森（Adam Wathan）在Tailwind Slack上向我建議這一點）

免費下載我的Vue手冊

如何使用Vue動態應用類

了解如何根據某些條件使Vue輸出一門課或另一門課

更多vue教程：