可以将基于类的样式转换为 VueJS 组件的内联样式吗？答案

【问题标题】：Possible to convert class based styles to inline styles for VueJS component?可以将基于类的样式转换为 VueJS 组件的内联样式吗？
【发布时间】：2020-03-05 14:25:54
【问题描述】：

我正在尝试编写一个 VueJS 组件，然后将其转换为画布元素，以便可以将其作为图像下载。我正在使用库 rasterizeHTML 将我的 HTML 转换为画布。

这很好用；但是，我发现该库不尊重 Vue 组件标签中编写的样式，但我设法使用内联样式使其工作。

这引出了我的问题：我更喜欢在我的单个文件组件的 Vue 标记中编写 CSS，但我正在寻找一些方法来将该 CSS 转换为内联样式。理想情况下，这将通过 Webpack 完成。有什么解决方案可以做到这一点吗？我正在寻找一种方法将 CSS 直接转换为每个组件的内联样式（不是通过计算的属性或方法），以便最简单地管理我的 CSS。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以使用对象绑定创建内联样式。例如：

:style="{ background: 'black', color: textColor }"

在此示例中，背景颜色使用字符串文字，文本颜色使用实例上的属性。运行下面的 sn-p 并检查 DevTools 中的 HTML 以查看样式是否内联。

new Vue({
  el: '#app',
  data() {
    return {
      textColor: 'yellow'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div :style="{ background: 'black', color: textColor }">
  This div block uses inline styles which you can inspect in DevTools.
  The background color is a string literal and the text color uses a data property.
  </div>
</div>

【讨论】：

感谢丹的回复！在这种情况下，我正在寻找一种方法，可以将 CSS 留在我的 Vue 样式标签中，并将其作为内联样式应用到我的 HTML。我之前已经完成了数据/计算/方法路线，将样式应用为对象或数组，但我正在寻找一种更简洁的方法，以便我的样式保持可管理性。
那么您是说您想在模板中使用类名，并将这些类名编译为从相关的<style> 类中获取的内联样式？
是的，我正在尝试采用
我明白了。也许有一些插件可以做到这一点。另一个想法是将类变成图书馆尊重的形式。