在 Vue 中使用 :style
时,CSS 属性名中的连字符(如 margin-left
)需要用引号括起来,或者使用 camelCase 形式。以下是两种修正方式:
方式 1: 使用引号
<template><div :style="{ 'margin-left': '25px' }"></div>
</template>
方式 2: 使用 camelCase
<template><div :style="{ marginLeft: '25px' }"></div>
</template>
注意事项
- 确保数值单位(如
px
)正确使用。 - 如果值是一个数字(如
25
),可以使用单位字符串,例如25 + 'px'
。
你可以选择以上任一方式来修复这个问题!如果还有其他问题,随时问我。