前置き
Nuxt.js Vue.js を使う上で必須の知識です！
これができるとコンポーネントを活かして
表現の幅を広げることができます🌟
例えば！
親によってクラスの有無を切り替えて
色分けをする、といったことができます💕
基本的な使い方
v-bind:{ 属性名 }="{ 変数 }"
タグの属性を変数にしたい時に使います。
aタグのhref属性をv-bindしてみます。
リンク先
http://localhost:3000/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="page"> <a v-bind:href="url">リンク</a> </div> </template> <script> export default { data () { return { url: '/', } }, } </script> |
クラスバインディング(オブジェクト構文)
定番のclass属性を変数にしてみましょう！
グローバル属性で、
どのタグにもつけられる属性ですね🌟
簡単な使い方
解説
v-bind:class="{ オブジェクト構文 }"
通常のプレーンなclass属性と共存OK👬
オブジェクト構文
{ クラス名: 真偽値 } なので
{ active: isActive } だと
isActiveがtrueの時のみ
activeクラスが付与されます💡
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="page" :class="{ active: isActive }"> </div> </template> <script> export default { data () { return { isActive: true, } }, } </script> <style lang="scss" scoped> .page { padding: 20px 0; &.active { background-color: pink; } } </style> |
複数のclassを付与したい場合
クラスバインディングで
active, text-danger クラスを付与します🌟
dataにobjectを書く
コード
オブジェクトを
インラインで書かなくてもOKです⭕️
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div class="page" :class="classObject" > <p>テキスト</p> </div> </template> <script> export default { data () { return { classObject: { active: true, 'text-danger': true, }, } }, } </script> <style lang="scss" scoped> .page { padding: 20px; &.active { background-color: pink; } &.text-danger { color: red; } } </style> |
算出プロパティcomputedに書く
この記事で実際に使用しているので
興味がある方はチャレンジしてください🔥💪
親によってクラスの有無を変えて、
色分けしています✨😯
【Nuxt.js】props実践編：switchボタンを作ろう！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div class="page" :class="classObject" > <p>テキスト</p> </div> </template> <script> export default { computed: { classObject () { return { active: true, 'text-danger': true, } }, }, } </script> <style lang="scss" scoped> .page { padding: 20px; &.active { background-color: pink; } &.text-danger { color: red; } } </style> |
クラスバインディング(配列構文)
簡単な使い方
解説
v-bind:class="[ 変数, 変数 ]"
[]はなくても大丈夫です🙆♀️
ただ分かりやすく配列にしています！
変数: 変数名
変数名には付与したい
クラス名を割り当てます。
activeClass: 'active',
errorClass: 'text-danger',
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <div class="page" v-bind:class="[activeClass, errorClass]" > <p>テキスト</p> </div> </template> <script> export default { data () { return { activeClass: 'active', errorClass: 'text-danger', } }, } </script> <style lang="scss" scoped> .page { padding: 20px; &.active { background-color: pink; } &.text-danger { color: red; } } </style> |
三項演算を使った書き方
三項演算とは
式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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<template> <div class="page" v-bind:class="[isActive ? activeClass : errorClass]" > <p>テキスト</p> </div> </template> <script> export default { data () { return { isActive: true, activeClass: 'active', errorClass: 'text-danger', } }, } </script> <style lang="scss" scoped> .page { padding: 20px; &.active { background-color: pink; } &.text-danger { color: red; } } </style> |
三項演算にはこんな書き方も！
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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<template> <div class="page" v-bind:class="[isActive ? activeClass : '', errorClass]" > <p>テキスト</p> </div> </template> <script> export default { data () { return { isActive: false, activeClass: 'active', errorClass: 'text-danger', } }, } </script> <style lang="scss" scoped> .page { padding: 20px; &.active { background-color: pink; } &.text-danger { color: red; } } </style> |
先ほどの三項演算で分かる通り、
''は不要なクラスですね！
isActiveがtrueの時のみ、
activeクラスが付きさえすれば良いです😯
書き換え後
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
activeクラスの有無を
isActiveの真偽値で決めるだけですね🌸
インラインスタイルのクラスバインディング
今度はclassを付与するのではなく
直接cssを当てていきます💡
v-bind:style="プロパティ: 色や数値"
オブジェクト構文
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <div class="page" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" > <p>テキスト</p> </div> </template> <script> export default { data () { return { activeColor: 'red', fontSize: '16', } }, } </script> |
オブジェクトにまとめてもOKです⭕️
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div class="page" v-bind:style="styleObject" > <p>テキスト</p> </div> </template> <script> export default { data () { return { styleObject: { color: 'red', fontSize: '13px' }, } }, } </script> |
配列構文
複数のスタイルオブジェクトを
適応することができます✨
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <div class="page" v-bind:style="[baseStyles, overridingStyles]" > <p>テキスト</p> </div> </template> <script> export default { data () { return { baseStyles: { color: 'red', fontSize: '13px' }, overridingStyles: { height: '100px', backgroundColor: 'pink', }, } }, } </script> |
オブジェクト+配列
プロパティに複数の値を
つけたい時に便利です💡
プロパティはdisplayのみですが、
値が複数あるため[]で囲っています。
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
実践編はこちら
タイトルがprops実践編になっていますが、
propsを活かして親によって
classバインディングを切り替えます🌟
ぜひチャレンジしてみてください✨💪