Vue Class and Style Binding

How it works

Vue accepts objects and arrays for class and style bindings. An object makes the condition beside each class explicit. This is useful when a state needs both a visual treatment and a text explanation. The desk below uses a class for its open state and a numeric inline border width; the shared stylesheet supplies the rest of the presentation.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css

Example

<script setup>
import { ref } from "vue";

const open = ref(false);
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="open = !open">Toggle desk</button>
    <p
      :class="{ available: open }"
      :style="{ borderWidth: open ? '3px' : '1px' }"
      data-card
    >
      <output data-result>{{ open ? "Open" : "Closed" }}</output>
    </p>
  </main>
</template>

Expected result

After the toggle the card says Open and has class available.

A class name is a style hook, not an accessible status on its own. The text remains visible so the state does not depend only on colour. Keep stable styles in CSS and inline only values that genuinely depend on data.