Styling Komponen — Vue

Scoped Styles Di SFC, tambahkan scoped agar style hanya berlaku untuk komponen itu: .card { border: 1px solid #ddd; padding: 16px; } Dynamic Class Binding const

Scoped Styles

Di SFC, tambahkan scoped agar style hanya berlaku untuk komponen itu:

<style scoped>
.card { border: 1px solid #ddd; padding: 16px; }
</style>

Dynamic Class Binding

const isActive = ref(true)
const type = ref("success")

---template---
<div :class="{ active: isActive }">Toggle class</div>
<div :class="['base', type]">Dynamic class</div>

Dynamic Style Binding

const color = ref("blue")
const size = ref(16)

---template---
<p :style="{ color: color, fontSize: size + 'px' }">Styled text</p>

Yang akan kamu pelajari