Vueテンプレート構文：{{ }} とディレクティブを最短で理解する – 5/12

Vueの最大の特徴はテンプレートです。この記事では「{{ }}」「v-bind」「v-if」「v-model」など最低限の文法に絞って紹介します。

{{ }} で値を表示する

テンプレート内では {{ }} を使って値を表示できます。

<template>
  <p>Hello {{ name }}</p>
</template>

<script setup>
const name = "Taro"
</script>

v-bind（:）で属性に値を渡す

属性に値を入れるときは v-bind（省略記法 :）を使います。

<img :src="imageUrl" alt="sample" />

v-ifで条件表示

条件で表示を切り替えます。

<p v-if="open">表示中</p>

v-modelで入力と同期する

フォーム入力は v-model が便利です。

<input v-model="text" />
<p>{{ text }}</p>

Reactのcontrolled componentに近い役割を、Vueでは v-model で自然に書けます。

練習問題

1. price を表示して「Price: 1200」のようにしてみましょう。
2. open をtrue/falseで切り替え、v-ifで表示を出し分けましょう。
3. v-modelで入力した文字をそのまま表示してみましょう。