Conditional Class Name pada Vuejs

Ada kalanya anda memerlukan class yang hanya akan diappend pada element html disaat kondisi tertentu. Misalkan ketika status user aktif, maka anda akan memberikan class active dan saat user non aktif anda akan memberikan class non-active.

Berikut cara untuk menambahkan conditional class pada template vuejs.

<template>
	<div :class="isActive ? 'active' : 'non-active' ">
		...
	</div>
</template>

Atau anda juga dapat menambahkan default class untuk kedua kondisi tersebut.

<template>
	<div class="user-profile text-large" :class="isActive ? 'active' : 'non-active' ">
		...
	</div>
</template>

Apabila dirender, maka output dari class yang di append adalah:

1. Untuk kondisi aktif class="user-profile text-large active"
2. Atau untuk kondisi non-aktif class="user-profile text-large non-active"