vueでclassとstyleを制御するには

2022年2月18日2022年2月18日 souki202

vueでは、classやstyleを連想配列で制御したり、要素の追加削除時にアニメーションを付けたりなどが可能です。

つまり、v-bindを発展させた方法になります。

この内容は、v-bindの基礎知識が必須になります。下の記事で説明しています。

【vue】 v-bindでvueの値をHTMLとやり取りする方法

vueでは、vueの値をHTMLの属性に設定したり、入力フォームに入れた値をvueの値に反映させるには`v-bind`や`v-model`を用い…

1 class制御
- 1.1 配列で指定
- 1.2 連想配列で指定
2 styleの指定
3 まとめ

class制御

classは、配列または連想配列で入れることができます。

配列で指定

他の属性と違い、classは配列を使ってv-bindで連携させることができます。

const app = Vue.createApp({
    data() {
        return {
            classes: [
                "alert", "alert-danger", "is-show"
            ],
        };
    }
});

<!-- classには"alert alert-danger is-show"が設定される -->
<p :class="classes">sample</p>

See the Pen by Totori (@souki202) on CodePen.

このサンプルは裏でbootstrapを読み込んでいます。

こうすると、配列並べた文字がクラス一覧になります。こうすることで、クラスを文字列で制御ではなく、配列で制御することでクラスの操作ができるようになります。

連想配列で指定

keyがクラス名, valueがそのclassを適用するかの条件になります。その連想配列をv-bindで設定します。

const app = Vue.createApp({
    data() {
        return {
            classes: {
                // 適用される
                alert: true,
                
                // falseなので"alert-danger"は適用しない
                "alert-danger": false, 

                // 適用される
                "alert-warning": true
            }
        };
    }
});

<div :class="classes">
    <!-- メッセージ -->
</div>

また、しばしばHTML側に連想配列を書くことがあります。

<div :class="{alert: true, alert-danger: isDanger, alert-warning: isWarning}">
    {{ errorMessage }}
</div>

const app = Vue.createApp({
    data() {
        return {
            classes: {
                isDanger: false,
                isWarning: true,
            }
        };
    }
});

:classに直接連想配列を埋め込んでいます。isDangerがtrueなら"alert alert-danger"が、isWarningがtrueなら"alert alert-warningが設定されます。

若干見づらいですが、頭の中で改行して考えましょう。

シンタックスハイライトがないために、キー名をシングルクォーテーションで囲まないと駄目なパターンで囲み忘れることがよくあります。

alert-dangerのように、クラス名ではハイフンを使うので、特に顕著です。

See the Pen vue v-bind class embed by Totori (@souki202) on CodePen.

classとv-bind:classを合わせると、クラス一覧の結果は2つの和集合になります。つまり、classにあるか、v-bind:classでtrueになっているか一方を満たしていれば、そのclassが付きます。

<div class="hoge fuga" :class="{hoge: false, hige: true, foo: false}"></div>なら、クラスはhoge fuga higeになります。

styleの指定

styleも同様に連想配列で指定できます。{"プロパティ": "値"}を並べるだけです。

<p :style="{color: `rgb(${color.r}, ${color.g}, ${color.b})`}">sample</p>

`rgb(${color.r}, ${color.g}, ${color.b})`

上の例だと、テンプレート文字列を利用した書き方を行っています。プロパティはcolor、値はrgb(color.r, color.g, color.b)です。

See the Pen vue style by Totori (@souki202) on CodePen.

連想配列なので、複数設定できます。

const app = Vue.createApp({
    data() {
        return {
            styles: {
                color: "red",
                "font-size": "24px",
                padding: "10px 20px 30px 40px",
            }
        };
    }
});

<!-- 
color: red;
font-size: 24px;
padding: 10px 20px 30px 40px;

の3つが適用される
-->
<p :style="styles">hogehoge</p>

また、relativeとabsoluteを組み合わせ、topとleftをxy座標代わりに用いると、自由に動かすことができたりします。

まとめ

vueでは、classを配列で管理することができます。また、連想配列にすることで、それぞれの値にtrueかfalseを設定するだけで各classの付け外しが可能です。

style操作では{"プロパティ": "値"}のような連想配列を作ると、:styleに埋め込むことができます。