Binding HTML Classes

Binding to Objects

ใช้ :class ในการ Binding Styles ใน

<script>
	const classObject = reactive({
	  active: true,
	  'text-danger': false
	})
</script>

<template>
	<div :class="classObject"></div>
<template>

rendered

<template>
<div class="active"></div>
</template>

Binding to Arrays

เราต่อ array ใน :class ได้

<script>
	const activeClass = ref('active') 
	const errorClass = ref('text-danger')
</script>

<template>
	<div :class="[activeClass, errorClass]"></div>
</template>

rendered

<template>
	<div class="active text-danger"></div>
</template>

Binding Inline Styles

ใช้ :style

<script setup>
import { ref } from 'vue'

const activeColor = ref('red')
const fontSize = ref(30)
</script>

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    This is a styled div.
  </div>
</template>