Contents7

2026-05-16 update: An older post. The bones still hold up, but the tool UI and versions are from the original writing — newer releases may differ.

A short intro to Vue.js’s own HTML notation, written for people picking up Vue for the first time.

The takeaway

  • The mustache tag ({{ }}) outputs script-side variables into HTML
  • v-bind is a directive that binds attributes to dynamic expressions
  • : is the shorthand prefix for v-bind:
  • Array notation lets you apply multiple classes or styles at once

Mustache tag

The mustache tag is for surfacing variables or function results — defined in script — inside the HTML.

You use it by writing {{ }} somewhere in the template.

The code below defines displayText in script and prints it from HTML.

When you run it, the output reads 文字列です。.

<template>
  {{ displayText }}
</template>

<script>
export default {
  data() {
    return {
      displayText: '文字列です。'
    };
  },
};
</script>

That’s the simplest possible form.

The example uses a string variable, but the same syntax accepts an object.

<template>
  {{ displayObj }}
</template>

<script>
export default {
  data() {
    return {
      displayObj: {
        text: '文字列です。'
      }
    };
  },
};
</script>

Worth noting: running this prints { text: '文字列です。' } literally.

To render 文字列です。 on its own, write displayObj.text.

v-bind

v-bind is the main thing this post is about.

v-bind lets you bind attributes to dynamic logic with almost no ceremony.

Toggling class dynamically opens up a lot of expressive room on the page, so this is where it gets used most.

Basic v-bind usage

The code below applies the activeClass class based on the boolean isActive.

When you run it, 文字列です。 appears in white text.

<template>
  <div v-bind:class="{ activeClass: isActive }">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }
</style>

isActive is defined in script, and the HTML’s v-bind:class evaluates it.

Here isActive is true, so the class applies. Flip it to false and the text renders in black.

v-bind shorthand

v-bind has a shorthand.

Prefix the attribute with : and v-bind kicks in.


The code below applies the activeClass class based on the boolean isActive.

When you run it, 文字列です。 appears in black text.

The reason it’s black: the expression uses ! to negate the value.

<template>
  <div :class="{ activeClass: !isActive }">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }
</style>

Multiple v-bind

To bind more than one class condition on a single attribute, wrap the expressions in an array.


The code below applies both activeClass and sampleClass.

When you run it, 文字列です。 appears in white text.

<template>
  <div :class="[{ activeClass: isActive }, { sampleClass: sampleNum === 1 }]">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      sampleNum: 1
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }

  .sampleClass {
    width: 100%;
  }
</style>

Each entry is a normal JS expression, so comparison operators are fair game.

v-bind works on essentially any attribute. The ones it ends up on most often are class, style, and src.

Closing

That’s the mustache tag and v-bind in Vue.js — the foundation everything else builds on.

Worth getting comfortable with before moving on.

Related: