【Vue.js】v-bindで条件によってclassを設定する

こんにちは、ryohei(@ityryohei)です!

本記事では、Vue.jsのv-bindで条件分岐の結果でclassを設定する方法をご紹介しています。

Vue.jsのv-bind:classで条件分岐の結果で出力するclassを変えたいんだけど、良い方法ないかな?

上記の疑問にお答えします。

本記事では下記バージョンのVue.jsで動作確認をしております。

  • Vue.js:v3.2.20

では、解説していきます。

三項演算子を使用する

v-bindは三項演算子の演算結果によって出力内容を制御することができます。三項演算子は下記のような構文を指し、左に指定した式の結果、trueであればtrue側の処理を、falseであればfalse側の処理を実行します。

bool ? true : false;

三項演算子は簡易的なif文のような使い方ができますので、上記を使用して、v-bindに条件を指定し、結果によってclassを設定してみます。

v-bindで条件によってclassを設定する

dataに指定したnumberの値によって出力するclassを変更してみます。numberの値によってactiveもしくはpassiveclassが出力されるようにします。

HTML

<div id="app">
    <p v-bind:class="[number > 3 ? 'active' : 'passive']">値 : {{ number }}</p>
</div>

CSS

.active {
    background-color: blue;
}

.passive {
    background-color: red;
}

JavaScript

const App = {
    data() {
        return {
            number: 5
        }
    },
}
Vue.createApp(App).mount('#app')

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

numberには整数の5が代入されているため、三項演算子の実行結果はtrueとなり、activeclassが適用されています。三項演算子で条件によってclassを設定することができていますね。

最後に

v-bindはclassだけではなく他の属性にも対応しています。条件によって~するという処理は、特に外観を構築する際によく使用する処理ですので、本記事の内容がお役に立てば幸いです。

以上、Vue.jsのv-bindで条件によってclassを設定する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら