【Vue3】v-bind:classとscssの&(アンパサンド)で、動的にスタイルを変える方法

vue.jsでスタイリングを変える方法は色々とありますが、今回は、v-bind:classとscssの.&(アンパサンド)を用いて、動的にスタイルを変える方法を紹介します。

SCSSの.&記法

親のクラスを参照しつつ、追加でスタイルを定義できるようにする記法です。

// コンパイル前
.class {
  &.-hoge {
    background-color : black;
  }
}

// コンパイル後
.class.-hoge {
  background-color: black;
}

Vueでの実装

今回は、簡単なテキストボックスと、トグル制御のボタンを使って、ボタンを押すと、テキストボックスのスタイルが変わるケースで実装していきます。

<template>
    <input type="text" class="input" :class="errorClass" />
    <button @click.prevent="onClick">{{ toggle }}</button>
</template>

<script>
    export default {
      setup(){
        const toggle = ref(false);
        const onClick = () => {
            toggle.value = !toggle.value;
        };
        const errorClass = computed(() => {
            return { '-error': toggle.value }; // ⭐️point
        });
	return {
	    toggle,
            errorClass,
            onClick,
	}
    }
</script>

<style lang="scss" scoped>
.input {
	width: 100px;
	height: 30px;
	margin: 26px;
	border: 1px solid gray;
	border-radius: 4px;
	&.-error {  // ⭐️point
	    color: red;
	    border-color: red;
	}
}
</style>

ポイント

conputed内のオブジェクトにて、.&で定義したクラス名をキーに指定します。今回で言うとscssでは&.-errorなので、'-error'と書きます。

const errorClass = computed(() => {
  return { '-error': toggle.value }; // .&で定義したクラス名をキーにとる
});

オブジェクトのバリューにBoolean値を指定して、trueの場合は-error、falseは何もしないという自走を表現できます。

ブラウザでの表示

- トグルがtrue

chromeのElementタブでの表示

- トグルがfalse

chromeのElementタブでの表示

トグルの値によって、inputクラスが動的に変更されているのが確認できます。

Vueでのスタイルの書き方は色々ありますので、選択肢の一つとしてみてください。