问题描述
限时送ChatGPT账号..我希望能够在单个文件组件中将数据从对象传递到
.但是,这似乎不太可能.
I want to be able to pass data from a object to the <styles>
in a single file component. However, it doesn't seem like this is possible.
我正在努力实现的目标:
What I'm trying to achieve:
<template></template>
<script>
export default {
data: function() {
return { color: "#f00" }
}
}
</script>
<style>
body {
background-color: this.color
}
</style>
推荐答案
据我所知,您无法将数据从组件传递到其样式表.
As far as I'm aware, you are not able to pass data from the component to its stylesheets.
就动态样式而言,最佳做法是在需要时使用 v-bind:class
或 v-bind:style
. 部分应仅用于 CSS 模板语言.
The best practice as far as dynamic styling is to use v-bind:class
or v-bind:style
if needed. The <style>
section should be used for the CSS templating language only.
<template>
<p :style="{ backgroundColor: bgColor }">Lorem ipsum</p>
</template>
<script>
export default {
data() {
return {
bgColor: '#000'
}
}
}
</script>
如果您有任何其他问题,请告诉我!
Let me know if you have any other questions!
更新
由于目标是将它用于诸如变暗之类的 Sass 函数,我建议改为通过实用程序类管理所需的各种颜色.
Since the goal is to use it for Sass functions like darken, I would recommend managing the various colors needed through utility classes instead.
这篇关于将对象数据传递给 Vue.js 中的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论