Question

我希望能够将数据从对象传递到单个文件组件中的<styles>。但是，这似乎不可能。

我想要实现的目标：

<template></template>

<script>
export default {
    data: function() {
        return { color: "#f00" }
    }
}
</script>

<style>
body {
    background-color: this.color
}
</style>

Answer 1

据我所知，您无法将数据从组件传递到其样式表。

就动态样式而言，最佳做法是根据需要使用v-bind:class或v-bind:style。 <style>部分仅应用于CSS模板语言。

<template>
    <p :style="{ backgroundColor: bgColor }">Lorem ipsum</p>
</template>

<script>
    export default {
        data() {
            return {
                bgColor: '#000'
            }
        }
    }
</script>

如果您有任何其他问题，请与我们联系！

<强>更新

由于目标是将它用于像黑暗这样的Sass函数，我建议管理通过实用程序类所需的各种颜色。

将对象数据传递给Vue.js中的样式

1 个答案: