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

vue

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

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

実際のサンプルはこちら

サンプルコード

<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が適用されて、文字が赤くなります。

以上です。

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

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

コメント

タイトルとURLをコピーしました