v-bindでstyle、classの属性値を変える[Vue.js]

2019年5月21日

Vue.jsにおいてHTML要素の属性に対してデータバインディングするには、v-bindディレクティブを利用します。

 

それぞれ、value、href、src属性に対してデータバインディングしています。

v-bindは下記のように省略可能です。

 

 

スタイル(style)属性


 

style属性にデータバインディングしています。

12行目においてstylesという適当に付けた名前を指定し、dataオプションにオブジェクトとして記述します(23〜27行目)。

 

24、25行目

background-colorやfont-sizeのようなケバブケースではなく、キャメルケースで記述する必要があります。

 

 

複数のスタイルを適用するには、配列を利用します(12行目)。

 

 

 

クラス(class)属性


 

class属性にデータバインディングしています。

19行目

下記のようにクラスが割り当てられます。

 

 

スタイルと同様に複数のクラスを適用するには、配列を利用します(23行目)。

23行目

下記のようにクラスが割り当てられます。

 

 

下記コードはボタンをクリックするごとに、sample-activeという名前のクラスを有効化、非有効化しています。

19行目

クラス名にハイフン(-)が付く場合は、シングルクォーテーション(’)で囲む必要があります。

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー