'-' 在 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;"&nbsp;&nbsp; &nbsp; &nbsp;v-bind:style="{ 'margin-left': margin + 'px'}">&nbsp; &nbsp; &nbsp;...</div>或者<div style="width:100px;height: 100px;background-color: red;cursor: pointer;"&nbsp;&nbsp; &nbsp; &nbsp;v-bind:style="{ marginLeft: margin + 'px'}">&nbsp; &nbsp; ...</div>希望这可以帮助！