こんにちは。
野中やすおです。
今回の記事では、Vue.jsのディレクティブの一番の基本であるv-bindについて解説していきます。
目次
v-bindとは？
v-bindは、Vue.jsのディレクティブの1つで、HTML要素の属性に動的な値をバインドするために使用されます。略して「:」(コロン)を使っても表現することもできます。一般的にアプリでは省略形のコロンが使われることが多いので、この記事でも省略形を使っていきます。
v-bindの使い方
v-bindは、以下のような使われ方をすることが多いです。
- 属性に単一のデータバインディングを設定する
- 属性に式を含むデータバインディングを設定する
- 属性のオブジェクトリテラルを使ったバインディングを設定する
属性に単一のデータバインディングを設定する
下記の例では、image_urlというデータプロパティの値が<img>要素のsrc属性にバインドされます。image_urlの値が変更されると、<img>要素のsrc属性も自動的に更新されます。
|
1 2 3 4 5 |
<template> <div> <img :src="image_url"> </div> </template> |
属性に式を含むデータバインディングを設定する
下記の例では、userIdというデータプロパティの値を使って、リンクのURLを動的に生成しています。userIdの値が変更されると、リンクのURLも自動的に更新されます。
|
1 2 3 4 5 |
<template> <div> <a :href="'/page/' + userId">各ユーザーページへのリンク</a> </div> </template> |
属性のオブジェクトリテラルを使ったバインディングを設定する
下記の例では、isActiveとisDisabledというデータプロパティを使って、ボタンのクラス属性を動的に切り替えています。isActiveが真の場合、activeクラスが適用されます。一方で、isDisabledが真の場合、button-disabledクラスが適用されます。
|
1 2 3 4 5 |
<template> <div> <button :class="{ active: isActive, 'button-disabled': isDisabled }">ボタン</button> </div> </template> |
|
1 2 3 4 |
data: { isActive: true, 'button-disabled': isDisabled } |
参考
Vue.js - The Progressive JavaScript Framework…
