英文:
Dynamically update CSS variable in vue js
问题
我正在尝试创建动态渐变过渡，需要更改渐变中的一个特定变量，但我无法访问该变量。我已阅读文档，但仍然不知道如何做。
这是渐变代码
background: radial-gradient(circle, hsla(274, 75%, 37%, 1) 0%, hsla(280, 100%, 80%, 1) 60%);
我希望动态更新最后的 "60%" 值。
该变量被强制为百分比变量，但我的变量是浮点数，这使情况变得更糟。是否有办法在 Vue.js 中访问该变量并将我的浮点变量转换为百分比？
我感谢任何帮助 
英文:
I'm trying to make dynamic gradient transition, where I have to change one specific variable from the gradient, but I just can't access the variable. I read the docs but still don't know how.
Here is the gradient code
background: radial-gradient(circle, hsla(274, 75%, 37%, 1) 0%, hsla(280, 100%, 80%, 1) 60%);
I am wanting to update the last "60%" value dynamically.
The variable is forced to be percent variable but my variable is float which makes it worse. Is there any way to acces the variable and convert my float variable to percent in vue js?
I appreciate any help
答案1
得分: 3
以下是翻译好的内容：
Vue 3中使用v-bind()在CSS中
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>
英文:
Vue 3 with v-bind() in CSS
v-bind() can be used to bind a reactive variable or computed property to a CSS property. Updating the CSS value is then as easy as updating the reactive variable.
<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 with var()
Vue 2 is slightly more involved. You need to bind the computed variable to the element and also assign the variable in the styling with var(). The syntax of var() requires you precede the variable name with two hyphens, e.g. --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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论