なやむくん
条件に応じてクラスを付与する方法を知りたい…。
なやむさん
動的にクラスを追加してスタイルを変更したい…。
などの疑問や悩みを解決してまいります。
Vue.jsではリアクティブ変数を利用することで動的に属性値を変更することが簡単にできます。
その中で、条件に応じて要素のスタイルを変更したいと思われている方も多いと思います。
今回は、動的にクラスを追加する方法について解説します。
みつた
条件に応じて要素のスタイルを変更することができるようになるので、見せ方のバリエーションを増やすことにもつながります！
完成例
まずは完成例を紹介します。
以下が実装コードになります。（※Vuetifyを使用しています。）
<template>
<v-container>
<div :class="['border pa-6 mb-2', bgColor(number)]">{{ number }}</div>
<v-btn @click="add">+</v-btn>
<v-btn @click="sub">-</v-btn>
</v-container>
</template>
<script setup land="ts">
import { ref } from "vue";
const number = ref(0);
/**
* 数値を足し算する関数
*/
const add = () => {
number.value++;
};
/**
* 数値を引き算する関数
*/
const sub = () => {
number.value--;
};
/**
* 数値が正の数か負の数で背景色を変更する関数
* @param number
* @return 背景色
*/
const bgColor = (number) => {
if (number > 0) {
return "bg-success";
} else if (number < 0) {
return "bg-error";
} else {
return "bg-white";
}
};
</script>完成例では+ボタンをクリックでnumberが+1され、-ボタンをクリックしたらnumberが-1されます。
numberの数値が正の数であれば背景色が緑色に、負の数であれば背景色が赤色に、0の場合は背景色が白色になります。
このように、条件に応じてクラスを付与して背景色を変更しています。
よろこびくん
すごいです！どのように実装しているのですか？
みつた
説明しますね！
コード解説
肝心のクラス部分の記述は以下のようになります。
<div :class="['border pa-6 mb-2', bgColor(number)]">{{ number }}</div>まずクラスをv-bindで動的に変更できるようにします。
みつた
v-bindについては以下の記事を参考にしてください。参考記事
-
-
【Vue.js】v-bindディレクティブについて解説します。
続きを見る
そして値を配列にして元々指定しているクラスと、動的に変更する関数を記述しています。
なやむさん
関数を指定するんですか？
みつた
処理結果を返してあげることでその返り値がクラスとして反映されます！詳しくは関数の処理を見ていきましょう。
関数の処理内容は以下のようになっています。
/**
* 数値が正の数か負の数で背景色を変更する関数
* @param number
* @return 背景色
*/
const bgColor = (number) => {
if (number > 0) {
return "bg-success";
} else if (number < 0) {
return "bg-error";
} else {
return "bg-white";
}
};関数の引数にはnumberをいれて、そのnumberの数値に応じて条件分岐します。
値はreturnで返し、配列に返した値を入れます。
これにより背景色を変更するクラス名を入れることで条件に応じて背景色を変更することができています。
みつた
今回は条件に応じて色の変更を行いましたが、様々な使い方ができると思いますので、ぜひ活用してください！
