Vue.js

【Vue.js】v-bind:classの使い方

生徒さん
生徒さん
v-bind:class=”{block: isActive}”って書き方があるんだけど、これってどういう意味なんだろう?

以上の疑問の解決記事です。

 

Vue.jsではclassを追加・削除するのに、v-bindディレクティブを使った方法がよく使用されます。最初の頃は「これ、どういう意味なんだろう」と混乱するかもしれません。

例えば、次のような記述です。

<p v-bind:class="{block: isActive}">テキスト1</p>

 

ゆう
ゆう
最初はとっつきにくいけど、次第に慣れていくよ!

 

この記述だけではclassを制御することはできませんが、methodsなどで処理を追加すれば、classの追加・削除が可能になります。

そこで本記事では、Vue.jsにおけるv-bind:classの使い方について解説していきます。

 

v-bind:classの使い方

今回使用するコードです。
HTMLファイルにコピーして、ブラウザで確認してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
    <style>
        .parent {
            height: 100px;
        }
        p {
            display: none;
            margin: 0;
        }
        .block {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="parent">
            <p :class="{block: isActive}">テキスト1</p>
            <div>テキスト2</div>
        </div>
        <button @click="clickEvent">切り替え</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    isActive: false   
                }
            },
            methods: {
                clickEvent() {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>
</html>

 

ゆう
ゆう
右上のcopyをクリックしてね。

 

ブラウザで表示させると、次のような画面になっています。

 

特徴は以下の通り。

“テキスト1”は非表示(display: none;)
“テキスト2″が表示(display: block;)
“切り替え”ボタンあり

続いて、このコードの挙動を見てましょう。

 

コードの挙動

コードの挙動をまとめます。

“切り替えボタン”をクリックすると、”テキスト1″が表示される
クリックの前後でクラスが追加・削除されている

 

“切り替えボタン”をクリックすると、”テキスト1″が表示される

ボタンをクリックすると、”テキスト1″が表示されます。

 

ソースコードレベルでは、どんな変化が起きているのでしょうか?

 

クリックの前後でクラスが追加・削除されている

コードを確認すると、クリックの前後でblockクラスが追加されたり、削除されたりしています。

ここから分かることは、次の通りです。

 

【特徴】Boolean値によって、クラスが追加・削除される

v-bind:classの特徴は「Boolean値によってクラスの追加・削除を制御可能なこと」です。

vue.js devtoolsvueタブで確認してみましょう。

isActiveがfalse時は非表示、true時は表示されている

 

“テキスト1″が表示されている時はisActivetrue、非表示の時はfalseになっていることが分かります。

ゆう
ゆう
コードは少しややこしいけど、動きは単純だね。

 

コードの解説

各コードを解説します。

data内で初期値を定義

まず、フラグとなる変数をdata内に定義します。

data() {
    return {
        isActive: false   
    }
},

 

methodsでBoolean切り替えの処理を定義

変数isActiveを制御する処理を、methods内に定義します。

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

 

ゆう
ゆう
this.isActive = !this.isActiveのような書き方は、よく使うから覚えておくと良いかも!
生徒さん
生徒さん
どういう意味なんですか?
ゆう
ゆう
isActiveがfalseならtrueにする。trueならfalseにする」という意味だよ。
生徒さん
生徒さん
Boolean値を反転させるということなんですね。

 

これらの記述によって、クラスを制御することが可能になります。

 

まとめ

本記事では、「【Vue.js】v-bind:classの使い方」について以下のことを解説しました。

v-bind:classの使い方
コードの挙動
【特徴】Boolean値によって、クラスが追加・削除される
コードの解説

 

初めて見るときは、とっつきにくいですが、コードを書いていけば次第に慣れていきます。ぜひ、エディターで試してみてください。

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。