【Vue初心者向け】シンプルなクラスバイディングのサンプルコード

クラスを動的に切り替えたい時にはクラスバイディング

例えば、クラスをつけたり外したり、変えたりしたいことがあります。
そんな時はクラスバイディングを利用すると簡単に実装できます。
ドキュメント：クラスとスタイルのバインディング

上記の公式のドキュメントの通りですが、実際の動作とコードを合わせて確認した方がわかりやすいと思いますので、以下サイトで実際の動作とサンプルコードを確認できるようになっています。

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

このサンプルコードではわかりやすく、ボタンを押すと、「active」の真偽値が変化し、クラスをつけたり外したりします。それによりactiveクラスが付いている時はCSSが効いて文字が赤くなります。

コード

<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>

宣伝：ブログ書いてます。→ブログ