【Vue】クラスとスタイルのバインディングを✅
緊張したら「酒ケジュール」を連呼してしまう病を就活フェーズまでに治したいこと23期中野昴です。
今回は、クラスとスタイルのバインディング方法を学習していきます。
クラスとスタイルのバインディングとは
classやstyleに動的に変数を入れること
そもそもデータバインディングとは、データと描画を同期する仕組みを言う。
なので、styleやclassにデータをバインディングすることでcssの色を変えたり、縦幅横幅を変更させることができる。
様々な構文が用意されている
- オブジェクト構文
- 配列構文
オブジェクト構文
その名の通り、v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることができる。
v-bind:class ディレクティブはプレーンな class 属性と共存できます。つまり、次のようなテンプレートと:
<v-btn @click="hasError= !hasError"></v-btn>
<transition name="fade">
<div class="text-h2 bold"
v-if="show" v-bind:class="{ active: isActive, title: hasError }">ZEROKEN</div>
</transition>
次のようなデータがあったとする
data: {
isActive: true,
hasError: false
}
そして、titleには下記のようなcssが与えられているとする
.title {
color: white;
}
ボタンのクリックでhasErrorの真偽値を切り替えさせることができる。
<div class="static active"></div>
isActive もしくは hasError が変化するとき、クラスリストはそれに応じて更新されすため、下記のようにスタイルが動的に変更されるようになる。
束縛されるオブジェクトはインラインでなくてもかまいません:
#template
<v-btn @click="changeCss= !changeCss"></v-btn>
<transition name="fade">
<div class="text-h2 bold" v-if="show" v-bind:class="changeCss">ZEROKEN</div>
</transition>
#script
data: {
changeCss:{
active: true,
title: false
},
}
#css
.title {
color: white;
}
.active{
width: 300px;
}
こんな感じで描画される。
オブジェクトを返す**算出プロパティ**に束縛することもできる。
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
title: this.error && this.error.type === 'fatal'
}
}
}
配列構文
v-bind:class に配列を渡してクラスのリストを適用することができる
<div class="text-h2 bold" v-if="show" v-bind:class="[activeClass, errorClass]">ZEROKEN</div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
HTMLタグには次のように表示されている
<div class="active text-danger"></div>
リスト内のクラスを条件に応じて切り替えたい場合は、三項演算子式を使って実現することができru
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
この場合 errorClass は常に適用される一方で、activeClass クラスは isActive が真と評価されるときだけ適用されている。
配列構文の内部ではオブジェクト構文を使うこともできる
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
直接描画させたい場合
オブジェクト構文
これまで、クラスとスタイルのバインドを条件に応じて描画させてきたが、固定値を文字列と組み合わせて記述することもできる。
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
オブジェクトを渡すことでコードをクリーンにすることができる。
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
配列構文
v-bind:style 向けの配列構文は、同じ要素に複数のスタイルオブジェクトを適用することができまる。
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data(){
baseStyle: {
text-color: primary,
margin: 3,
},
overridingStyles: {
text-color: danger,
margin: 10,
}
}
まとめ
- vueには状況に応じてスタイルを適用させる方法が存在する
一言
眠い、、アドベントカレンダー描かなきゃだ、、
