Cách áp dụng động một lớp bằng Vue

Tìm hiểu cách đặt Vue đầu ra một lớp hoặc một lớp khác tùy thuộc vào một số điều kiện

Giả sử bạn muốn đăng ký lớp họcbackground-darkvào một phần tử, nếuisDarkprop là đúng, và nếu không thì thêmbackground-light.

Làm thế nào bạn sẽ làm điều đó trong Vue?

Sử dụng:class="[ isDark ? 'background-dark' : 'background-light' ]"

Đây là một ví dụ:

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

(cảm ơn rất nhiềuAdam Wathanvì đã gợi ý điều này cho tôi trên Tailwind Slack)

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác:


Công nghệ Wiki trực tuyến!