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

【问题标题】：How to access component variable inside style in single file in Vue JS如何在Vue JS中的单个文件中访问样式内部的组件变量
【发布时间】：2018-08-18 03:15:46
【问题描述】：

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

<template>

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

</template>


<script>

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

</script>


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

有更好的方法/插件吗？？

我已经知道:style 和:class

【问题讨论】：

您可以使用为此目的设计的 CSS 类来完成此操作，而不是直接操作 CSS 规则。
是的，我找到你了！但是当我们想要@media css 操作时，它就成了问题！
我看不出那个用例需要任何不同的方法。
@connexo 认为您想要在桌面上使用不同的图像，在移动设备上使用不同的图像！
你会用 CSS 来做到这一点......根本不涉及 Javascript。

标签： javascript vue.js vuejs2 vue-component vue-cli

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

“我已经知道 :style 和 :class”在问题上说，请不要给出笼统的答案