Vueと共通

【Nuxt.js】Nuxt文法編:v-bind

前置き

Nuxt.js Vue.js を使う上で必須の知識です!
これができるとコンポーネントを活かして
表現の幅を広げることができます🌟

例えば!
親によってクラスの有無を切り替えて
色分けをする、といったことができます💕


基本的な使い方

v-bind:{ 属性名 }="{ 変数 }"

タグの属性を変数にしたい時に使います。
aタグのhref属性をv-bindしてみます。

リンク先

http://localhost:3000/


クラスバインディング(オブジェクト構文)

定番のclass属性を変数にしてみましょう!

グローバル属性で、
どのタグにもつけられる属性ですね🌟

簡単な使い方

解説

v-bind:class="{ オブジェクト構文 }"
通常のプレーンなclass属性と共存OK👬

オブジェクト構文
{ クラス名: 真偽値 } なので
{ active: isActive } だと
isActiveがtrueの時のみ
activeクラスが付与されます💡

コード

) pages


複数のclassを付与したい場合

クラスバインディングで
active, text-danger クラスを付与します🌟

dataにobjectを書く

コード

オブジェクトを
インラインで書かなくてもOKです⭕️

) pages


算出プロパティcomputedに書く

この記事で実際に使用しているので
興味がある方はチャレンジしてください🔥💪
親によってクラスの有無を変えて、
色分けしています✨😯
【Nuxt.js】props実践編:switchボタンを作ろう!

コード

クラスバインディング(配列構文)

簡単な使い方

解説

v-bind:class="[ 変数, 変数 ]"
[]はなくても大丈夫です🙆‍♀️
ただ分かりやすく配列にしています!

変数: 変数名
変数名には付与したい
クラス名を割り当てます。
activeClass: 'active',
errorClass: 'text-danger',

コード

) pages


三項演算を使った書き方

三項演算とは

式1 ? 式2 : 式3

式1が
trueなら式2
falseなら式3

if文で考えてみよう!

if文に置き換えて
考えると分かりやすいです🌟

if(式1){
 式2
} else {
 式3
}

解説

v-bind:class="[isActive ? activeClass : errorClass]"
isActiveがtrueならactiveClass,
isActiveがfalseならerrorClass
が適応されます🌟

今回はtrueのためactiveClassでつけた
activeクラスが適応されて
背景がピンクになっていますね🎀
テキストの色は赤になりません💡

コード

) pages


三項演算にはこんな書き方も!

v-bind:class="[ isActive ? activeClass : 'abc', errorClass ]"

この場合はカンマ( , )の前で
一旦区切りましょう!

v-bind:class="[ ( isActive ? activeClass : 'abc' ), errorClass ]"

isActiveがtrueならactiveClassを
isActiveがfalseならabcを付与します。

errorClassは常に付与されています。
isActiveの真偽値に影響を受けません。

そのためプレーンなclassに書いてもOK⭕️

class="errorClass"
v-bind:class="[ isActive ? activeClass : 'abc']"


クラスバインディング(オブジェクト+配列)

errorClassはプレーンなclassに書くので
あんまり使わないと思いますが、一応🔰

書き換え前

) pages

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

先ほどの三項演算で分かる通り、
''は不要なクラスですね!
isActiveがtrueの時のみ、
activeクラスが付きさえすれば良いです😯

書き換え後

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

activeクラスの有無を
isActiveの真偽値で決めるだけですね🌸


インラインスタイルのクラスバインディング

今度はclassを付与するのではなく
直接cssを当てていきます💡

v-bind:style="プロパティ: 色や数値"

オブジェクト構文

コード

) pages

オブジェクトにまとめてもOKです⭕️


配列構文

複数のスタイルオブジェクトを
適応することができます✨

コード

) pages


オブジェクト+配列

プロパティに複数の値を
つけたい時に便利です💡

プロパティはdisplayのみですが、
値が複数あるため[]で囲っています。

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>


実践編はこちら

タイトルがprops実践編になっていますが、
propsを活かして親によって
classバインディングを切り替えます🌟

ぜひチャレンジしてみてください✨💪

-Vueと共通

© 2020 aLiz Nuxt