この記事は初心者向け Vue.jsで複数のclassを付与する方法について記述した自分用メモになります。
誤っている点がありましたらご指摘をお願いいたします。
この記事は以下の方向けの記事となっております。
推定読者：
・v-bindの使い方は分かるが複数のclassを要素に付与する方法が分からない方
CSSプロパティを付与する方法は２つある
複数のプロパティを付与する方法には以下の２つがあります。
・要素に直接複数のプロパティを指定して付与する
・予めvue側で用意したオブジェクト型を用いて付与する（推奨）
要素に直接複数のプロパティを指定して付与する
以下、基本的な書き方
<p :class={クラス名: true(もしくはfalse), クラス名: true(もしくはfalse)}
「trueもしくはfalse」は、「指定したクラスを付与する（true）かしない(false)か」を指定しています。
実際にこのやり方で記述した例が以下になります。
<h4 :class="{ textcolor: false, 'bg-color': true}">テキストカラーが赤(falseなので適用されない)、背景カラーがスカイブルー（trueなので適用）</h4>
.textcolor {
color: red;
}
.bg-color {
background-color: skyblue;
}
実行結果
また上記の方法はtrue falseでクラスを付与したり外したりする事を可能としています。
もし取り外す必要がない場合や同じプロパティで別のものを指定したい場合などは以下の方法もあります。
以下、基本的な書き方
<p :style="{セレクタ名: 変数名, セレクタ名: 変数名}"></p>
<script>
new Vue({
el: '#app',
data: {
変数名: '具体的な値',
変数名: '具体的な値',
}
})
</script>
上記の例では{プロパティ名：変数名}としていますが、直接具体的な値を直接記述することもできます。（例：{color: 'red'}）
実際にこのやり方で記述した例が以下になります。
<h4 :style="{color: textColor, 'background-color': bgColor}">テキストカラーが赤、背景カラーがスカイブルー</h4>
<script>
new Vue({
el: '#app',
data: {
textColor: 'red',
bgColor: 'skyblue',
}
})
</script>
実行結果
予めvue側で用意したオブジェクト型を用いて付与する（推奨）
以下、基本的な書き方
<h1 :class="classObj"></h1>
new Vue({
el: '#app',
computed: {
classObj() {
return { textcolor: true, 'bg-color': true}
}
}
})
.textcolor {
textcolor: red;
}
.bg-color {
background-color: skyblue;
}
実行結果
おまけ Object型を二つ付与する方法
以下、基本的な書き方
<p :style="[オブジェクト名, オブジェクト名]"></p>
<script>
new Vue({
el: '#app',
data: {
オブジェクト名: {
セレクタ名: '指定する値',
セレクタ名: '指定する値'
},
オブジェクト名: {
セレクタ名: '指定する値'
}
}
})
</script>
実際にこのやり方で記述した例が以下になります。
<h4 :style="[styleObj, pxObj]">Object型を二つ付与する</h4>
<script>
new Vue({
el: '#app',
data: {
styleObj: {
color: 'red',
'background-color': 'skyblue'
},
pxObj: {
fontSize: '100px'
}
}
})
</script>
実行結果
