在vue js中动态更新CSS变量

Question

我正在尝试进行动态渐变过渡，我必须从渐变中更改一个特定变量，但我无法访问该变量。我阅读了文档但仍然不知道如何。 这是渐变代码

background: radial-gradient(circle, hsla(274, 75%, 37%, 1) 0%, hsla(280, 100%, 80%, 1) 60%);

我想动态更新最后一个“60%”值。

变量被迫为百分比变量，但我的变量是浮点数，这使得情况变得更糟。有什么方法可以访问变量并将我的 float 变量转换为 vue js 中的百分比吗？

Answer 1

Vue 3 与 CSS 中的 v-bind()

v-bind()

可用于将响应式变量或计算属性绑定到 CSS 属性。 更新 CSS 值就像更新反应变量一样简单。

<template>
  <div>
    <div class="box" />
    <input v-model="lastPercent" type="range" min="1" max="100" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastPercent: 60
    }
  },
  computed: {
    gradient() {
      return `radial-gradient(circle, hsla(274, 75%, 37%, 1) 0%, hsla(280, 100%, 80%, 1) ${this.lastPercent}%`
    }
  }
}
</script>

<style>
.box {
  width: 300px;
  height: 300px;
  background: v-bind(gradient);
}
</style>

游乐场示例

Vue 2 与 var()

Vue 2 稍微复杂一些。 您需要将计算变量绑定到元素，并使用 var() 在样式中分配该变量。

var()

的语法要求您在变量名称前添加两个连字符，例如

--variableName

<template>
  <div>
    <div class="box" :style="boxStyle" />
    <input v-model="lastPercent" type="range" min="1" max="100" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastPercent: 60
    };
  },
  computed: {
    boxStyle() {
      return {
        '--gradient': `radial-gradient(circle, hsla(274, 75%, 37%, 1) 0%, hsla(280, 100%, 80%, 1) ${this.lastPercent}%`
      };
    }
  }
};
</script>

<style>
.box {
  width: 300px;
  height: 300px;
  background: var(--gradient);
}
</style>

codepen 示例