如何使用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教程: