🐈

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

2021/09/05に公開

JavaScript

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

概要

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

書き方

書き方はシンプルで、<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>

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

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

概要

書き方

参考

Discussion