Question

是否有任何vue插件可以让我们在单个文件组件中的<style/>标签中使用模板变量，例如

<template>

    <div>{{ display }}</div>

</template>


<script>

    export default {
        data(){
            return { display: 'block' }
        }
    }

</script>


<style>
    body {
        display: {{ display }}
    }
</style>

有更好的方法/插件吗？

我已经了解:style和:class

Answer 1

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

您可以通过绑定内联样式在样式属性中添加任何内容：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Answer 2

我认为在当前版本的Vue中无法访问<Style>内部的Vue模型（数据层）。 Vue仅控制DOM树，而不能帮助您解决CSSOM。

您可能正在使用WebPack或其他捆绑程序，并在具有<template>，<script>和<style>的单个文件中编写模块化组件。您的捆绑程序可以将<template>转换为Vue渲染函数，但是这里的style纯粹是css，将被捆绑到单个css文件中。

如果要动态设置由组件控制的样式值，则需要找到一种在运行时注入它们的方法，即使用styled-component的Vue版本（因为它们最初来自React ）。但是除非您还将值保存在localStorage中，否则您将失去缓存功能。

如何在Vue JS中的单个文件中访问样式内的组件变量

2 个答案: