初心者向け。v-bindディレクティブのクラスに対する使い方
1946 回閲覧されました
この記事は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の応用
応用した使い方として↓もあります。
これで↓と表示されます。
