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

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsのv-bindで条件分岐の結果で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もしくはpassiveのclassが出力されるようにします。

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となり、activeのclassが適用されています。三項演算子で条件によってclassを設定することができていますね。

最後に

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

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