初心者向け。v-bindディレクティブのクラスに対する使い方

初心者向け。v-bindディレクティブのクラスに対する使い方

1820 回閲覧されました

この記事はv-bindディレクティブのクラスに対する使い方をすぐに忘れてしまう私のための備忘録です。

 

 

v-bind:class=“‘クラス名'”

v-bindですが「v-bind:class=” ‘クラス名’ “」を「:class=” ‘クラス名’ “」としてもよく省略した形をよく使います。

コードを↓にします。

これで↓と表示されます。

 

 

スタイルをhtmlに直接書く場合

v-bind:style=”{セレクタ名:データ属性の値}”と書きます。

例えば↓です。

データ属性にpxなどの単位をつけたい場合はv-bind:style=”{セレクタ名:データ属性の値+ ‘px’}”と書きます。

例えば↓です。

 

data属性をバインド

コードを↓にします。

これで↓と表示されます。

19行目の「Color」は何でもいいです。

 

 

computedを使用

コードを↓にします。

これで↓と表示されます。

18行目の「color」は何でもよくて19行目の「color」はクラス名です。

 

 

methodsを使用

コードを↓にします。

これで↓と表示されます。

18行目の「color」は何でもよくて19行目の「color」はクラス名です。

 

 

真偽値を使って1つのクラスを動的にする

「v-bind:class=”{ クラス名: 真偽値 }”」とします。

具体的にコードは↓です。

これで↓になります。

11行目の真偽値「isActive」を最初はfalseにします。(19行目)

そしてisActiveを23行目でtrueにすることでactiveクラス(36行目〜39行目)を追加します。

 

 

複数クラスを動的(色々と付け替える)にする

何かをした時でクラスを付け替えたくなる時があります。

そんな時は「v-bind:class=”{‘クラス名’:条件,’クラス名’:条件}”」とします。

具体的には↓です。

これで↓となります。

 

 

v-bindの応用

応用した使い方として↓もあります。

これで↓と表示されます。