Как сделать переменною css реактивной и зависящей от переменной Vue js?

Question

[wipe0009]

Здравствуйте, стилизуя linear gradient я хочу изменять заполнение тонов с помощю переменной пример

--litters-range: 25%;
background: linear-gradient(
          to right,
          white var(--litters-range),
          rgba(87, 87, 87, 0.46) var(--litters-range)
        );

Как я могу составить computed свойство которое будет изменять css переменною в зависимости от переменной Vue js

Answer 1

[Alex]

Вариант 1:

<template>
  <div :style="{ '--litters-range': myComputedProperty }"></div>
</template>

Вариант 2:

<style>
  div {
    background: linear-gradient(
        to right,
        white v-bind(myComputedProperty),
        rgba(87, 87, 87, 0.46) v-bind(myComputedProperty)
    );
  }
</style>

https://github.com/vuejs/rfcs/pull/231