'-' 在 v-bind:style / Vue.js 中

Question

我无法理解如何将 CSS 代码制作成带有符号“-”的 v-bind:style。如果我尝试做这样的事情：<DIV style="width:100px;height: 100px;background-color: red;cursor: pointer;" v-bind:style="{ margin-left: margin + 'px'}"></DIV>我得到：invalid expression: Unexpected token '-' in

Answer 1

正如Vue文档中所解释的：“您可以使用 camelCase 或 kebab-case（在 kebab-case 中使用引号）作为 CSS 属性名称”

因此，您需要将其更改margin-left为marginLeftOR'margin-left'以使其按预期工作。

您的代码将变为：

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 

     v-bind:style="{ 'margin-left': margin + 'px'}">

     ...

</div>

或者

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 

     v-bind:style="{ marginLeft: margin + 'px'}">

    ...

</div>

希望这可以帮助！