【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を設定する方法のご紹介でした!

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍