Vue CSS Binding

❮ Previous Next ❯

Vue CSS Binding

Dynamic styling is a crucial part of building interactive user interfaces.

Vue allows you to dynamically bind CSS classes and inline styles to your HTML elements.

This is achieved by using the v-bind directive (or its shorthand :) on the class and style attributes.

Binding Classes with Object Syntax

You can pass a JavaScript object to :class to dynamically toggle classes.

The key is the class name you want to apply, and the value is a boolean condition.

If the boolean condition is true, the class is added. If false, it is removed.

Object Syntax Example:

<div :class="{ active: isActive }">
  I am active!
</div>

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .active { background-color: #4CAF50; color: white; padding: 20px; font-weight: bold; }
    .inactive { background-color: #f44336; color: white; padding: 20px; }
  </style>
</head>
<body>
  <div id="app">
    <div :class="{ active: isToggled, inactive: !isToggled }">
      This box changes classes dynamically!
    </div>
    <br>
    <button @click="isToggled = !isToggled">Toggle Class</button>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return { isToggled: true }
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

Binding Classes with Array Syntax

You can also pass an array to :class to apply multiple classes at the same time.

This is useful when you have class names stored directly as strings inside your data variables.

Array Syntax Example:

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

Binding Inline Styles

Binding inline styles works very similarly to binding classes.

You bind to the style attribute using :style and pass an object.

CSS properties should be written in camelCase (e.g., fontSize instead of font-size) within the JavaScript object.

Inline Style Example:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  Inline styling is easy!
</div>

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <div :style="{ color: textColor, fontSize: baseSize + 'px', marginTop: '20px' }">
      Watch my style change dynamically!
    </div>
    <br>
    <button @click="baseSize += 5">Increase Font Size</button>
    <button @click="textColor = 'purple'">Make it Purple</button>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          textColor: 'blue',
          baseSize: 16
        }
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

Exercise 1 of 2

When using the object syntax for :class, what does the boolean value dictate?

If true, the class is added. If false, the class is removed. It determines if the element should be completely hidden from the page.

Exercise 2 of 2

How should CSS properties with hyphens be written when passing them to :style as a JavaScript object?

With underscores (e.g., font_size) In camelCase (e.g., fontSize)

❮ Previous Next ❯

Vue Basics

Vue Advance

Vue CSS Binding

Vue CSS Binding

Binding Classes with Object Syntax

Object Syntax Example:

Binding Classes with Array Syntax

Array Syntax Example:

Binding Inline Styles

Inline Style Example:

Exercise 1 of 2

Exercise 2 of 2