是否可以将基于类的样式转换为VueJS组件的内联样式？

Question

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

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

这引出我的问题：我更愿意在单个文件组件的Vue标记中编写CSS，但我正在寻找某种方法来将CSS转换为嵌入式样式。理想情况下，这将通过Webpack完成。有解决方案吗？我正在寻找一种方法，可以将CSS直接转换为每个组件的内联样式（尽管不是计算属性或方法），以最轻松地管理CSS。

Answer 1

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

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

运行下面的代码片段，并在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>