🐈

【Vue3】Vueで宣言した変数の値をCSSで読み込む

1 min read

Vue3.2からSFCの<style>内でのv-bind利用が実験的機能では無くなり、正式に導入されました。

概要

SFCのdataもしくはsetup内で宣言した値を<style>で利用できます。

実際の値はハッシュ化されたCSS変数として書き出されるため、CSSは静的な状態です。
また、値が変更された場合はハッシュ化されたCSS変数が書き換えられるため、リアクティブです。

書き方

書き方はシンプルで、<script>内で宣言した変数名を以下のようにv-bind()に渡すことで、<style>内で利用可能です。

.text {
  color: v-bind(color);
}

動くサンプルコードは以下の通りです。

サンプル
<template>
  <p class="text">テキスト</p>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const color = ref("red");

    return {
      color,
    };
  },
  // OptionAPIでも利用可能です
  // data() {
  //   return {
  //     color: "red",
  //   };
  // },
};
</script>

<style scoped>
.text {
  color: v-bind(color);
}
</style>

上記サンプルではシンプルに色の名前を渡していますが、何かしらを計算して反映したい時などに重宝しそうですね。

参考

https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

Discussion

ログインするとコメントできます