Official Examples

You can pass an object to v-bind:class to dyanmically toggle classes:

</div>This syntax indicates that the presence of the `active` class depends on the truthiness of the data property `isActive`.

You can pass more properties in the object to dynamically toggle multiple classes. Additionally, the `v-bind:class` directive can coexist with regular class atttributes. Given the following template:

<div>```
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

</div>The result renders as:

When `isActive` or `hasError` changes, the class list will update accordingly.

For example, if `hasError` has a value of `true`, the class list becomes `"static active text-danger"`.

**Note:** Renders the key based on the value.

Using :class for Conditional Display
------------------------------------

The `:class` binding can also control temlpate visibility and display:

Here I've highlighted parts of the code to emphasize the usage of `:class`:

`<template>`

`<div class="authContainer">`

`<div class="authWrapper">`

`<div class="auth_header">`

`<div class="auth_logo">Fruit Delivery</div>`

`<div class="auth_header_title">`

**`<a href="javascript:;" :class="{selected: authMethod}" @click="authMethod=true">SMS Login</a>`**

`<a href="javascript:;" :class="{selected: !authMethod}" @click="authMethod=false">Password Login</a>`

`</div>`

`</div>`

`\<!-- Content section -->`

`<div class="auth_content">`

`<form @submit.prevent="authenticate">`

`\<!-- SMS authentication -->`

**`<div :class="{visible: authMethod}">`**

`<section class="auth_message">`

`<input type="tel" maxlength="11" placeholder="Phone Number" v-model="phoneNumber" />`

`<button`

`:disabled="!validNumber"`

`class="send_verification"`

`:class="{valid_number: validNumber}"`

`@click.prevent="requestCode"`

`>{{countdownTimer>0 ? `(${countdownTimer}s) Sent` : 'Send Code'}}</button>`

`</section>`

`<section class="auth_verification">`

`<input type="tel" maxlength="8" placeholder="Verification Code" v-model="verificationCode" />`

`</section>`

`<section class="auth_instruction">`

`Tip: Unregistered phone numbers will automatically create an account upon login and agree to`

`<a href="javascript:;">User Agreement</a>`

`</section>`

**`</div>`**

`</template>`