Vue Directives and v-bind

How it works

Directives are special template attributes that connect the view to Vue behaviour. v-bind, usually written as a colon, binds an attribute or property to an expression. A boolean attribute follows boolean semantics: the string false is still a present value in ordinary HTML. The example uses a real boolean to disable an action when no packets remain.

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 packets = ref(0);
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button :disabled="packets === 0">Take packet</button
    ><output data-result>{{ packets }}</output>
  </main>
</template>

Expected result

The action is disabled because the count is zero.

The binding evaluates packets === 0 and passes true to disabled. Use the normal attribute when a value is static, and a binding when it comes from state. This keeps the source readable and avoids using unnecessary JavaScript for text that never changes.