クラスバインディングのサンプルコード

vue

2020.06.16

クラスバイディングを利用すれば、データに応じて色を変えたり表示を変えたりできます。

今回は、ボタンを押すと文字の色が変わるサンプルコードを実装していきます。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

サンプルコード
解説

サンプルコード

<template>
    <div class="class-binding">
        <div :class="{ active: isActive }">文字の色が変わります！</div>
        <button @click="changeActive">色をチェンジ</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isActive: true
        }
    },
    methods:{
        changeActive(){
            this.isActive = !this.isActive
        }
    }
}
</script>

<style scoped>
.active{
    color: red;
}
</style>

解説

<div :class="{ active: isActive }">文字の色が変わります！</div>

:classがクラスバインディングです。classをバインディングすることで、

activeの値（今回ならtrueかfalse）によってcssのクラスをつけることができます。

よく見てみると、

        return{
            isActive: true
        }

isActiveのtrueとfalseで変更できるようにしていますね。

<button @click="changeActive">色をチェンジ</button>

@clickでchangeActiveメソッドを呼び出しています。

    methods:{
        changeActive(){
            this.isActive = !this.isActive
        }
    }

changeActive()で、isActiveをtrueとfalseに変更させています。

.active{
    color: red;
}

isActiveがtrueの時、上記のCSSが適用されて、文字が赤くなります。

以上です。

クラスバイディングは、例えばチャットアプリでコメントする人ごとに色とかメッセージの配置を変えたいときなどに簡単に変えることができますし、使える幅は広いです。

ぜひ覚えてみてください。