[Vue.js] コンポーネントの値をCSSに渡す方法

コンポーネントの値をCSSに渡す方法

「v-bind:style」で定義したCSS変数をバインドする

Hoge.vue

<template>
  <div class="hoge" :style="styles" />
</template>

<script>
export default {
  name: 'Hoge',
  data() {
    return {
      styles: {
        '--hoge': '100px',
      },
    }
  },
}
</script>

<style scoped>
.hoge {
  height: var('--hoge');
}
</style>

propsの値をCSSに渡す場合

computedでCSS変数を定義する

Hoge.vue

<template>
  <div class="hoge" :style="styles" />
</template>

<script>
export default {
  name: 'Hoge',
  props: {
    height: { type: Number, required: true },
  },
  computed: {
    styles() {
      return {
        '--hoge': `${this.height}px`,
      }
    },
  },
}
</script>

<style scoped>
.hoge {
  height: var('--hoge');
}
</style>