ディレクティブ：v-if・v-for・v-bind・v-on
v-if と v-show で条件付きレンダリングを行い、v-for でループし、v-bind で属性を動的にバインドし、v-on で DOM イベントを監視します。
「ディレクティブ：v-if・v-for・v-bind・v-on」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
Vueディレクティブとは
ディレクティブはv-で始まる特別な属性で、DOM要素に何をするかをVueに指示します。ディレクティブはJavaScriptの式として評価され、リアクティブなデータの変更に応じて反応します。
v-if、v-else-if、v-else
v-ifは、truthyな式に基づいて要素を条件付きでレンダリングします。式がfalseの場合、要素はDOMから完全に削除されます。v-elseは代替の表示を指定します。
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show — 表示の切り替え
v-showはDOMに要素を追加・削除する代わりに、CSSのdisplay: noneを切り替えます。要素の表示が頻繁に切り替わる場合はv-showを使用し、条件がほとんど変化しない場合はv-ifを使用します。
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for — リストのレンダリング
v-for="item in items"は、各itemに対して要素をレンダリングします。更新を安定させるため、必ず:keyを指定してください。
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>オブジェクトに対するv-for
オブジェクトの値、またはキーと値のペアを反復処理します。
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind — 属性のバインディング
v-bind:attrまたは省略記法の:attrを使用すると、HTML属性をリアクティブな値に動的にバインドできます。
<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>v-bindのオブジェクト構文
オブジェクトを使用すると、複数の属性を一度にバインドできます。
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">クラスのバインディング: :class
オブジェクト（キー = クラス名、値 = 条件）または配列を使用して、CSSクラスを条件付きでバインドします。
<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>
<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">
<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"スタイルのバインディング: :style
camelCaseのオブジェクトを使用して、インラインスタイルをバインドします。
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on — イベントのリッスン
v-on:eventまたは省略記法の@eventを使用して、イベントリスナーを設定します。
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>イベント修飾子
Vueには組み込みのイベント修飾子があります。.prevent（preventDefault）、.stop（stopPropagation）、.once（1回だけ実行）、.self（対象が要素自体の場合のみ）、.passive（スクロールのパフォーマンスを向上）を使用できます。
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">クイックチェック
v-ifではなくv-showを使用するのは、どのような場合ですか？
復習: Vueディレクティブ
v-ifはDOMから要素を削除または追加します。v-showは表示を切り替えます。v-forはリストをレンダリングします（必ず:keyを指定します）。v-bind（:）は属性、:class、:styleをバインドします。v-on（@）はイベントリスナーを設定します。イベント修飾子には.prevent、.stop、.onceがあります。v-modelは双方向バインディングに使用します（v-bind:valueとv-on:inputを組み合わせたものです）。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「ディレクティブ：v-if・v-for・v-bind・v-on」レッスンは無料ですか？
はい。「ディレクティブ：v-if・v-for・v-bind・v-on」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「ディレクティブ：v-if・v-for・v-bind・v-on」で何を学びますか？
v-if と v-show で条件付きレンダリングを行い、v-for でループし、v-bind で属性を動的にバインドし、v-on で DOM イベントを監視します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ディレクティブ：v-if・v-for・v-bind・v-on」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue SFC：script・template・style
- Options API：data・methods・computed
- ディレクティブ：v-if・v-for・v-bind・v-on
- コンポーネント Props と Emits