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

Question

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

<template>

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

</template>


<script>

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

</script>


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

任何更好的方法/插件来做到这一点？

我已经知道:style和:class

Answer 1

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

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

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