如何在vueJs中使用动态样式

Question

有没有办法在vueJs组件中将数据读取为道具，并将其用作＆lt;的值？风格＆gt;部分？

类似的东西：

<my-component color="red" />

并使用红色作为动态​​值＆lt;风格＆gt;组件部分。

Answer 1

v-bind可以帮助您在vue.js中使用动态样式，如here所述。

  

v-bind：style的对象语法非常简单 - 它看起来几乎像CSS，除了它是一个JavaScript对象。您可以使用camelCase或kebab-case（使用带有kebab-case的引号）作为CSS属性名称：

<强> HTML

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

vue实例

data: {
  activeColor: 'red',
  fontSize: 30
}

现在activeColor在此处有效，每当您更改activeColor时，它也会在HTML / CSS中发生变化。

Answer 2

请注意，对于带有“-”的CSS属性（如背景色），您需要编写稍有不同的字体，以符合JS对象样式。由于json对象定义格式不允许-名称。

这将起作用

v-bind:style="{ 'background-color':backgroundColor }"

这行不通

v-bind:style="{ backgroundcolor:backgroundColor }"

从巴基斯坦一路走来。 ：）